具有多个类别的图像过滤器

Jquery - image filter with multiple categories

本文关键字：图像 过滤器      更新时间：2023-09-26

我试图添加一个图像过滤器到一个图片库，我有麻烦让它工作时，一张照片有多个类别。当手机只有一个类别(例如UX)时，下面的代码可以工作。但如果我在同一张照片上添加第二个类别，它就不起作用了(例如UX, UI)。我需要改变JS代码使其工作吗?谢谢!

HTML 

 <div id="filterWrapper">
                <a data-rel="all"  href="javascript:;" class="filter active">View all</a>
                <a data-rel="UX" href="javascript:;" class="filter">UX Design</a>
                <a data-rel="UI" href="javascript:;" class="filter">UI Design</a>
                <a data-rel="Prototype/Development" href="javascript:;" class="filter">Prototype/Development</a>
</div>
          <ul>
              <li>
                <a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX" ></a>
              </li>
              <li>
                <a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX UI Prototype/Development"></a>
              </li>
          </ul>

JS 

// filter selector
$(".filter").on("click", function () {
    var $this = $(this);
    // if we click the active tab, do nothing
    if ( !$this.hasClass("active") ) {
        $(".filter").removeClass("active");
        $this.addClass("active"); // set the active tab
        // get the data-rel value from selected tab and set as filter
        var $filter = $this.data("rel");
        // if we select view all, return to initial settings and show all
        $filter == 'all' ?
            $(".portfolio-item")
                            .attr("data-portfolio-group", "gallery")
                            .not(":visible")
                            .fadeIn()
        : // otherwise
            $(".portfolio-item")
            .fadeOut(0)
            .filter(function () {
                // set data-filter value as the data-rel value of selected tab
                return $(this).data("filter") == $filter;
            })
            // set data-portfolio-group and show filtered elements
            .attr("data-portfolio-group", $filter)
            .fadeIn(1000);
    } // if
}); // on

您正在检查是否相等，而您应该检查字符串是否存在于data-filter值内。

在过滤器函数中，你应该使用像。

return ($(this).data("filter").indexOf($filter) > -1);
相关文章：