jquery按类名onchange过滤无序列表答案

【问题标题】：jquery filter unordered list by class name onchangejquery按类名onchange过滤无序列表
【发布时间】：2013-09-16 21:28:07
【问题描述】：

我有一个很大的结果列表，我想用复选框过滤掉这些结果。因此，例如，当您单击 cat 3 时，您应该会看到所有具有 cat3 类的项目，如果您也单击 cat2，您应该会看到所有具有 cat2 和 cat3 的项目。在下面位于this fiddle 的代码中，我有 onchange 工作，所以如果你点击 cat3 它只显示 cat3 项目但是我无法让多个刻度在这里工作，如何实现？

<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>

（列表中有更多项目）

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();
    }
});

【问题讨论】：

我会做这样的事情 -> jsfiddle.net/GkQM9/2

标签： javascript jquery html filter onchange

【解决方案1】：

试试

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();
    }
});

演示：Fiddle

【讨论】：

我认为这里的第二个小提琴最适合我，感谢您的帮助！
我在最初的问题中没有考虑到这一点，但在我的页面上我也有过滤内容的选项卡，这些目前不适用于复选框，请参阅这个小提琴jsfiddle.net/aaronk85/9m8xw/1 有什么你能推荐我在这里做吗？还是您认为最好单独提出一个问题？
@ak85 一个单独的问题会更好
好主意，我已将其作为一个单独的问题提出。 stackoverflow.com/questions/18776842/…

【解决方案2】：

看起来您需要遍历每个复选框并确保在执行 jQuery('.item').hide(); 之前没有其他复选框被标记为选中。

 if (jT.is(':checked')) {
        jQuery('.item').hide(); //--- Here, you are not taking into consideration that some .item(s) may need to remain shown if their respective checkbox is checked.
        jQuery('.col-' + val).show();

【讨论】：