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 行 如下图
看到那个,后面空格了吗 干掉它！！！