Home>
I want to specify multiple values ​​for the data attribute

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

We have created a page to narrow down the images referring to the above site.
Although it can work well when there is only one refinement element, it will not be displayed if multiple specifications are made.
Can you tell me how to implement it?

Applicable source code
<div>
    <div>
      <a 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>
      <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);
Tried

Multiple settings for data attribute
data-category ='["space","graphic"]'and
data-category ='{"space","graphic"}' It is not displayed except for all.

  • Answer # 1

    $boxes.filter ('[data-category ="'+ $filterColor +'"]')Multiple codes cannot be specified in the code.

    There is a[attr ~ = value]selector (jQuery reference) that looks at "matches any of the space separators" likeclass, so< code>$boxes.filter ('[data-category ~ ="'+ $filterColor +'"]')givesdata-catrgory ="You can hit something like spec graphic".

Related articles