Question

我正在尝试根据以下简化代码过滤一些简单类别过滤器的元素：

<div class="filter">
    <ul class="marchi-filter">
        <li class="filter active" data-rel="data-all">Tutti i settori</li>
        <li class="filter" data-rel="data-13">Carrozzeria</li>
        <li class="filter" data-rel="data-14">Edilizia</li>
        <li class="filter" data-rel="data-16">Fai da te</li>
        <li class="filter" data-rel="data-15">Industria</li>
    </ul>
</div>
<div class="content">
    <div class="marchio-detail clearfix" data-filter="data-14|data-16|data-15">
    data-14 data-16 data-15
    </div>
       <div class="marchio-detail clearfix" data-filter="data-14|data-15">
    data-14 data-15
    </div>
       <div class="marchio-detail clearfix" data-filter="data-16">
    data-16 
    </div>
       <div class="marchio-detail clearfix" data-filter="data-16|data-15">
    data-16 data-15
    </div>
       <div class="marchio-detail clearfix" data-filter="data-14">
    data-14 
    </div>
</div>

以下js代码：

  $(document).ready(function() {
            $(".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 == 'data-all' ?
                            $(".marchio-detail")
                            .not(":visible")
                            .fadeIn(500)
                    :
                            // otherwise
                            $(".marchio-detail")
                            .fadeOut(500)
                            .filter(function() {
                                var $datalist = $(this).data("filter").split("|");
                                console.log($(this).inArray($datalist, $filter) > -1);
                                return $(this).inArray($datalist, $filter) > -1;
                            })
                            .fadeIn(1000);
                }
            });
        });

我已将数据过滤器拆分为数组，但.filter（）和.inArray（）的组合对我来说有点复杂。

如果有人能指出我罪魁祸首，我真的很感激。谢谢！

Answer 1

第一

$(".filter").on("click", function() {

应该是

$(".marchi-filter").on("click",'li', function () {

这样您的this变量就会引用li元素（包含data-rel属性的元素。在您的情况下，您有外部.filter元素事情搞砸了）

其次，inArray向后。有关详细信息，请参阅http://api.jquery.com/jquery.inarray/

最后，当您进行过滤以避免隐藏所有内容然后显示已过滤的结果时，您可以隐藏那些需要隐藏的内容并显示需要显示的内容..

所以否则应该成为

var all =  $(".marchio-detail"),
    active = all.filter(function () {
        var $datalist = $(this).data("filter").split("|");
        return $.inArray($filter, $datalist) > -1;
    })
all.not(active).fadeOut(500);
active.fadeIn(500);

在http://jsfiddle.net/gaby/LfSsb/

处进行所有更改的演示

Jquery - 过滤数组

1 个答案: