jquery.filterizr 使用报push错误

 1 <ul class="nav">
 2     <li class="active" data-filter="all">全部</li>
 3     <li data-filter="1">城市</li>
 4     <li data-filter="2">自然</li>
 5     <li data-filter="3">工业</li>
 6     <li data-filter="4">白昼</li>
 7     <li data-filter="5">夜景</li>
 8 </ul>
 9 
10 <div class="jq22">
11     <div class="filtr-item" data-category="1, 5">
12         <img src="img/a1.png" alt="">
13     </div>
14     <div class="filtr-item" data-category="2, 5">
15         <img src="img/a2.png" alt="">
16     </div>
17     <div class="filtr-item" data-category="1, 4">
18         <img src="img/a3.png" alt="">
19     </div>
20     <div class="filtr-item" data-category="3">
21         <img src="img/a4.png" alt="">
22     </div>
23     <div class="filtr-item" data-category="3, 4">
24         <img src="img/a5.png" alt="">
25     </div>
26     <div class="filtr-item" data-category="2, 4">
27         <img src="img/a6.png" alt="">
28     </div>
29     <div class="filtr-item" data-category="1, 5">
30         <img src="img/a7.png" alt="">
31     </div>
32     <div class="filtr-item" data-category="2, 4">
33         <img src="img/a8.png" alt="">
34     </div>
35     <div class="filtr-item abc" data-category="3">
36         <img src="img/a9.png" alt="">
37     </div>
38 </div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>
<script>
$(function() {
    $('.jq22').filterizr();

    $('.nav li').on('click', function() {
        $(this).toggleClass('active').siblings().removeClass('active');
    });
});
</script>

上面的代码是官方的代码 省略了部分样式 这段代码执行的时候是没有问题的。

但是如果代码是这样的话

<ul class="nav">
    <li class="active" data-filter="all">全部</li>
    <li data-filter="1">城市</li>
    <li data-filter="2">自然</li>
    <li data-filter="3">工业</li>
    <li data-filter="4">白昼</li>
    <li data-filter="5">夜景</li>
</ul>

<div class="jq22">
    <div class="filtr-item" data-category="1,5">
        <img src="img/a1.png" alt="">
    </div>
    <div class="filtr-item" data-category="2,5">
        <img src="img/a2.png" alt="">
    </div>
    <div class="filtr-item" data-category="1,4">
        <img src="img/a3.png" alt="">
    </div>
    <div class="filtr-item" data-category="3">
        <img src="img/a4.png" alt="">
    </div>
    <div class="filtr-item" data-category="3,4">
        <img src="img/a5.png" alt="">
    </div>
    <div class="filtr-item" data-category="2,4">
        <img src="img/a6.png" alt="">
    </div>
    <div class="filtr-item" data-category="1,5">
        <img src="img/a7.png" alt="">
    </div>
    <div class="filtr-item" data-category="2,4">
        <img src="img/a8.png" alt="">
    </div>
    <div class="filtr-item abc" data-category="3">
        <img src="img/a9.png" alt="">
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>
<script>
$(function() {
    $('.jq22').filterizr();

    $('.nav li').on('click', function() {
        $(this).toggleClass('active').siblings().removeClass('active');
    });
});
</script>

这段代码运行起来是有问题的会报错错误就是xxx push xxx 仔细看 data-category属性中间的空格没了 所以报错了

解决方案也很简单

打开jquery.filterizr.js 找到第 892 行如下图

看到那个,后面空格了吗 干掉它！！！