Question

我试图将图片过滤器添加到照片库，但是当一张照片有多个类别时，我无法让它工作。当手机只有1个类别（例如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

Answer 1

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

所以在filter函数中，你应该使用类似......

的东西

return ($(this).data("filter").indexOf($filter) > -1);

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

1 个答案: