質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

16409閲覧

data属性の値を複数指定したいです

asa.c

総合スコア9

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

2クリップ

投稿2018/08/29 23:13

data属性の値を複数指定したいです

https://www.webprofessional.jp/building-a-filtering-component-with-css-animations-jquery/

上記サイトを参考に画像を絞り込みするページを作成しています。
絞り込み要素が一つの時は上手く動作できるのですが、複数指定にすると表示されなくなってしまいます。
どうしたら実装できるのか、ご教示いただけないでしょうか。

該当のソースコード

html

1<div class="work-layout"> 2 3 <div class="cta filter"> 4 <a class="active" data-filter="all" href="#" role="button">all</a> 5 <a data-filter="space" href="#" role="button">space</a> 6 <a data-filter="graphic" href="#" role="button">graphic</a> 7 <a data-filter="illustration" href="#" role="button">illustration</a> 8 <a data-filter="movie" href="#" role="button">movie</a> 9 <a data-filter="logo" href="#" role="button">logo</a> 10 </div> 11 12 <div class="boxes"> 13 <a data-category="space" href="#"> 14 <img src="images/workimg_01.jpg" alt="work01"> 15 </a> 16 <a data-category="graphic" href="#"> 17 <img src="images/workimg_02.jpg" alt="work02"> 18 </a> 19 <a data-category="graphic" href="#"> 20 <img src="images/workimg_03.jpg" alt="work03"> 21 </a> 22 <a data-category="illustration" href="#"> 23 <img src="images/workimg_04.jpg" alt="work04"> 24 </a> 25 <a data-category="graphic" href="#"> 26 <img src="images/workimg_05.jpg" alt="work05"> 27 </a> 28 <a data-category="space" href="#"> 29 <img src="images/workimg_06.jpg" alt="work06"> 30 </a> 31 </div> 32 33 </div>

css

1.work-layout{ 2 max-width: 1280px; 3 margin: 50px auto 0px; 4} 5 6.filter { 7 margin: 30px 0 10px; 8} 9 10.filter a { 11 display: inline-block; 12 padding: 3px; 13 position: relative; 14 margin-right: 40px; 15 margin-bottom: 20px; 16 font-size: 1.8em; 17} 18 19.boxes { 20 display: flex; 21 flex-wrap: wrap; 22} 23 24.boxes a { 25 width: 100%; 26 margin: 2.5px 0px; 27} 28 29.boxes a img{ 30 width: 100%; 31 height: 100%; 32} 33 34.filter a::before, 35.filter a::after { 36 border-bottom: solid 2px #000; 37 bottom: 0; 38 content: " "; 39 display: block; 40 position: absolute; 41 transition: all .3s ease; 42 -webkit-transition: all .3s ease; 43 width: 0; 44} 45 46.filter a::before{ 47 left: 50%; 48} 49.filter a::after{ 50 right: 50%; 51} 52 53.filter a:hover::before, 54.filter a:hover::after{ 55 width: 50%; 56} 57 58.filter a.active:before { 59 content: " "; 60 position: absolute; 61 left: 0; 62 bottom: 0; 63 display: inline-block; 64 width: 100%; 65 border-style: none none solid none; 66 border-bottom: solid 2px #000; 67} 68 69.is-animated { 70 animation: .6s zoom-in; 71} 72 73@keyframes zoom-in { 74 0% { 75 transform: scale(.1); 76 } 77 100% { 78 transform: none; 79 } 80} 81 82/*----------------------------------*/ 83@media screen and (min-width:769px){ 84 85 .work-layout{ 86 width: 80%; 87 } 88 89 .boxes a { 90 width: 32.9%; 91 margin: 0 0.2% 0px; 92 } 93 94 .boxes a img{ 95 width: 100%; 96 height: auto; 97 } 98 99}/*min-width 769px 100------------------------------------*/

jquery

1$(function(){ 2 3 'use strict'; 4 5 var $filters = $('.filter [data-filter]'), 6 $boxes = $('.boxes [data-category]'); 7 8 $filters.on('click', function(e) { 9 e.preventDefault(); 10 var $this = $(this); 11 12 $filters.removeClass('active'); 13 $this.addClass('active'); 14 15 var $filterColor = $this.attr('data-filter'); 16 17 if ($filterColor == 'all') { 18 $boxes.removeClass('is-animated') 19 .fadeOut().finish().promise().done(function() { 20 $boxes.each(function(i) { 21 $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); 22 }); 23 }); 24 } else { 25 $boxes.removeClass('is-animated') 26 .fadeOut().finish().promise().done(function() { 27 $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) { 28 $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); 29 }); 30 }); 31 } 32 }); 33 34 })(jQuery); 35

試したこと

data属性の複数設定として
data-category='["space","graphic"]'や
data-category='{"space","graphic"}'で指定してみたのですが
all以外では表示されなくなってしまいました。

_beats_👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

$boxes.filter('[data-category = "' + $filterColor + '"]')と完全一致で照合しているので、このままのコードでは複数指定はできません。

classのような「スペース区切りのどれかに一致する」のをみる[attr~=value]セレクタ(jQueryリファレンス)がありますので、$boxes.filter('[data-category~="' + $filterColor + '"]')のようにすれば、data-catrgory="spec graphic"のようなものとヒットさせることができます。

投稿2018/08/29 23:26

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asa.c

2018/08/29 23:44

ご回答ありがとうございます! 複数指定できましたー! jquery難しくて挫折気味でしたが、一つ一つわかっていけるように頑張ります。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問