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

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

ただいまの
回答率

89.06%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,759

asa.c

score 8

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

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

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

 該当のソースコード

<div class="work-layout">

    <div class="cta filter">
      <a class="active" data-filter="all" href="#" role="button">all</a>
      <a data-filter="space" href="#" role="button">space</a>
      <a data-filter="graphic" href="#" role="button">graphic</a>
      <a data-filter="illustration" href="#" role="button">illustration</a>
      <a data-filter="movie" href="#" role="button">movie</a>
      <a data-filter="logo" href="#" role="button">logo</a>
    </div>

    <div class="boxes">
      <a data-category="space" href="#">
        <img src="images/workimg_01.jpg" alt="work01">
      </a>
      <a data-category="graphic" href="#">
        <img src="images/workimg_02.jpg" alt="work02">
      </a>
      <a data-category="graphic" href="#">
        <img src="images/workimg_03.jpg" alt="work03">
      </a>
      <a data-category="illustration" href="#">
        <img src="images/workimg_04.jpg" alt="work04">
      </a>
      <a data-category="graphic" href="#">
        <img src="images/workimg_05.jpg" alt="work05">
      </a>
      <a data-category="space" href="#">
        <img src="images/workimg_06.jpg" alt="work06">
      </a>
    </div>

  </div>
.work-layout{
  max-width: 1280px;
  margin: 50px auto 0px;
}

.filter {
  margin: 30px 0 10px;
}

.filter a {
  display: inline-block;
  padding: 3px;
  position: relative;
  margin-right: 40px;
  margin-bottom: 20px;
  font-size: 1.8em;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes a {
  width: 100%;
  margin: 2.5px 0px;
}

.boxes a img{
  width: 100%;
  height: 100%;
}

.filter a::before,
.filter a::after {
  border-bottom: solid 2px #000;
  bottom: 0;
  content: " ";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}

.filter a::before{
  left: 50%;
}
.filter a::after{
  right: 50%;
}

.filter a:hover::before,
.filter a:hover::after{
  width: 50%;
}

.filter a.active:before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 100%;
  border-style: none none solid none;
  border-bottom: solid 2px #000;
}

.is-animated {
  animation: .6s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  }
  100% {
    transform: none;
  }
}

/*----------------------------------*/
@media screen and (min-width:769px){

  .work-layout{
    width: 80%;
  }

  .boxes a {
    width: 32.9%;
    margin: 0 0.2% 0px;
  }

  .boxes a img{
    width: 100%;
    height: auto;
  }

}/*min-width 769px
------------------------------------*/
$(function(){

      'use strict';

      var $filters = $('.filter [data-filter]'),
        $boxes = $('.boxes [data-category]');

      $filters.on('click', function(e) {
        e.preventDefault();
        var $this = $(this);

        $filters.removeClass('active');
        $this.addClass('active');

        var $filterColor = $this.attr('data-filter');

        if ($filterColor == 'all') {
          $boxes.removeClass('is-animated')
            .fadeOut().finish().promise().done(function() {
              $boxes.each(function(i) {
                $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
              });
            });
        } else {
          $boxes.removeClass('is-animated')
            .fadeOut().finish().promise().done(function() {
              $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) {
                $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
              });
            });
        }
      });

    })(jQuery);

 試したこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/30 08:44

    ご回答ありがとうございます!
    複数指定できましたー!

    jquery難しくて挫折気味でしたが、一つ一つわかっていけるように頑張ります。
    ありがとうございました!

    キャンセル

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る