jquery按类名onchange过滤无序列表 [英] jquery filter unordered list by class name onchange

问题描述

我有一大堆的结果，我想用一个复选框过滤出来。所以例如当你点击猫3时，你应该看到类cat3的所有项目，如果你点击猫2以及你应该看到所有的项目都cat2和cat3。在下面的代码位于这个小提琴，我有onchange工作，所以如果你点击在cat3上它只显示cat3项目，但是我不能得到在这里工作的多个蜱虫，这怎么能实现？

  < form id =refine-cat> 
< span>< input type =checkboxvalue =1name =filtercol> cat 1< / span> 
< span>< input type =checkboxvalue =2name =filtercol> cat 2< / span> 
< span>< input type =checkboxvalue =3name =filtercol> cat 3< / span> 
< / form> 
< form id =refine-col> 
< span>< input type =checkboxvalue =1name =filtercat> col 1< / span> 
< span>< input type =checkboxvalue =2name =filtercat> col 2< / span> 
< span>< input type =checkboxvalue =3name =filtercat> col 3< / span> 
< span>< input type =checkboxvalue =4name =filtercat> col 4< / span> 
< / form> 
< ul> 
< li class =item cat-3 col-1> number 3< / li> 
< li class =item cat-3 col-1> number 3< / li> 
< li class =item cat-3 col-1> number 3< / li> 
< li class =item cat-1 col-1> number 1< / li> 
< / ul> 
  

（列表中有更多的项目）

JS

  jQuery（'＃refine-cat input [type = checkbox]'）。bind（'change' ，函数（e）{
 var jT = jQuery（this）; 
 var val = jQuery（this）.attr（'value'）||''; 
 if（jT.is （'：checked'））{
 jQuery（'。item'）。hide（）; 
 jQuery（'.cat-'+ val）.show（）; 
} else { 
 jQuery（'。item'）。show（）; 
 jQuery（'.cat-'+ val）.hide（）; 
} 
}）; 
 
 jQuery（'＃refine -col input [type = checkbox]'）。bind（'change'，function（e）{
 var jT = jQuery（this）; $ b $ （'。'（'：checked'））{
 jQuery（'。item'）。hide（'。'）。 （）; 
 jQuery（'。col-'+ val）.show（）; 
} else {
 jQuery（'。item'）。show（）; 
 jQuery （'.col-'+ val）.hide（）; 
} 
}）; 
  

解决方案

试试

  var $ items = jQuery（'。item'）; 
 var $ cats = jQuery（'＃refine-cat input [type = checkbox]'）; 
 var $ cols = jQuery（'＃refine-col input [type = checkbox]'）; 
 $ b $ cols.add（$ cats）.on（'change'，function（e）{
 var cats = $ cats.filter（'：checked'）。map（function ）{
 return'cat-'+（this.value || ||）
））。get（）; 
 var cols = $ cols.filter（'：checked'）。 map（function（）{
 return'col-'+（this.value ||''）
））。get（）; 
 
 if（cats.length | | cols.length）{
 var $ fitems = $ items; 
 if（cats.length）{
 $ fitems = $ fitems.filter（'。'+ cats.join（'， 。'））; 
} 
 if（cols.length）{
 $ fitems = $ fitems.filter（'。'+ cols.join（'，。'））; 
 
 
 $ fitems.show（）; 
 $ items.not（$ fitems）.hide（）; 
} else {
 $ items.show （）; 
} 
}）; 
  

演示：小提琴

I have a large list of results which I want to filter out with a checkbox. so for example when you click on cat 3 you should see all items with the class cat3 and if you click cat2 as well you should see all the items with both cat2 and cat3. In the below code which is located in this fiddle, I have the onchange working so if you click on cat3 it only shows the cat3 items however I can't get the multiple ticks working here, how can this be achieved?

<form id="refine-cat">
    <span><input type="checkbox" value="1" name="filtercol">cat 1</span>
    <span><input type="checkbox" value="2" name="filtercol">cat 2</span>
    <span><input type="checkbox" value="3" name="filtercol">cat 3</span>
</form>
<form id="refine-col">
    <span><input type="checkbox" value="1" name="filtercat">col 1</span>
    <span><input type="checkbox" value="2" name="filtercat">col 2</span>
    <span><input type="checkbox" value="3" name="filtercat">col 3</span>
    <span><input type="checkbox" value="4" name="filtercat">col 4</span>
</form>
<ul>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-1 col-1">number 1</li>
</ul>

(the list has more items in the fiddle)

JS

jQuery('#refine-cat input[type=checkbox]').bind('change', function (e) {
    var jT = jQuery(this);
    var val = jQuery(this).attr('value') || '';
    if (jT.is(':checked')) {
        jQuery('.item').hide();
        jQuery('.cat-' + val).show();
    } else {
        jQuery('.item').show();
        jQuery('.cat-' + val).hide();
    }
});

jQuery('#refine-col input[type=checkbox]').bind('change', function (e) {
    var jT = jQuery(this);
    var val = jQuery(this).attr('value') || '';
    if (jT.is(':checked')) {
        jQuery('.item').hide();
        jQuery('.col-' + val).show();
    } else {
        jQuery('.item').show();
        jQuery('.col-' + val).hide();
    }
});

解决方案

Try

var $items = jQuery('.item');
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');

$cols.add($cats).on('change', function (e) {
    var cats = $cats.filter(':checked').map(function(){
        return 'cat-' + (this.value || '')
    }).get();
    var cols = $cols.filter(':checked').map(function(){
        return 'col-' + (this.value || '')
    }).get();

    if(cats.length || cols.length){
        var $fitems = $items;
        if(cats.length){
            $fitems = $fitems.filter('.' + cats.join(', .'));
        }
        if(cols.length){
            $fitems = $fitems.filter('.' + cols.join(', .'));
        }

        $fitems.show();
        $items.not($fitems).hide();
    } else {
        $items.show();
    }
});

Demo: Fiddle

这篇关于jquery按类名onchange过滤无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！