jQuery-筛选数据属性隐藏所有元素

我正在使用输入复选框筛选具有数据属性的列表项

选中特定输入项时，所有元素都将隐藏，即使它们与选中的值无关

这是我的jQuery代码：

jQuery(document).ready(function () {

    //start filter
    jQuery('.cs-widget-content').delegate('input[type=checkbox]', 'change', function() {

    var lis = jQuery('.five-column > li.column');
    var checked = jQuery('input:checked');
            if (checked.length)
                    {                           
                        var selector = '';
                        jQuery(checked).each(function(index, element){                            
                            selector += "[data-offer~='" + element.id + "']";                            
                        });                        
                        lis.hide();                        
                        jQuery('.five-column > li.column').filter(selector).show();            
                    }
                    else
                    {
                        lis.show();
                    }
            }); //end filter

});

这是我的建议

我正在寻找的解决方案

如何使此过滤正常工作，页面加载时所有项目都应可见，但当选中输入值时，仅显示这些项目。隐藏所有其他内容。

更改代码

从

到

…

---

或者，如果要显示未选中的项目：

---

在

html

jQuery(document).ready(function () {    
    //start filter
    jQuery('input[type=checkbox]')
    .on('change', function (e) {
        jQuery('.five-column > li.column[data-offer]').hide();
        jQuery('input[type=checkbox]:checked').each(function (i, elem) {    
            jQuery('.five-column > li.column[data-offer=' + elem.id + ']')
                .show()
        });
    }); //end filter

});

---

jsFIDLE

我稍微修改了代码，以检查页面加载上的输入，向用户显示他们正在查看的是默认选择。如果这有损于任何东西，它可以改变

看

这是我的JavaScript

$(document).ready(function() {
        $('input[type=checkbox]').prop('checked', true);    
});

$('input[type=checkbox]').on('click', function(){
    var self = this;
    var status =  $(self).attr('id');
    var selElements = $('ul.five-column > li.column').filter(function(){
        return $(this).data("price") == status || $(this).data('offer') == status;
    });
    if (self.checked) {
        selElements.show();
    }  
    else {
        selElements.hide();
    }
});

---

那么，您的问题是什么呢？请注意，您使用的是哪个jQuery版本？从jQuery 1.7开始，

.delegate（）

已被

.on（）

方法取代。似乎您先隐藏所有li，然后显示与选中复选框相关的

，我认为这永远不会起作用，因为jQuery运行异步，它不知道哪个先出现，因此隐藏/显示同时发生，在比赛状态下，隐藏可能最后完成。您可以通过在

via的显示中延迟执行来进行黑客攻击setTimeout@Vucko我使用的是jQuery 2.1.3你的小提琴的标记中有一个输入错误（

date offer

，而不是

data offer

）它的工作原理。。但这种延迟给布局带来了不好的印象。还有其他可能性吗？或者展示一些加载分区？这太棒了。。。有没有可能我显示所有加载的项目，然后过滤它？哇。。。就是这样……：）你的jQuery很完美，如果你不介意的话，还有一件事。当输入未选中时，项目应该显示正确吗？感谢您的回答，我还有一些其他需要更改此函数，我想我应该单独询问。这是我的数据属性代码中的一个输入错误，我在问题中更新了它。其

数据提供

输入不应自行检查。用户将这样做

$(".cs-widget-content").on("change", "input[type=checkbox]", function () {
    $(".five-column > li.column").hide();
    $(".cs-widget-content").find("input:checked").each(function (i, el) {
        $(".five-column > li.column").filter('[data-offer="' + el.id + '"]').show();
    });
});

$(".cs-widget-content").on("change", "input[type=checkbox]", function () {
    $(".five-column > li.column").hide();
    $(".cs-widget-content").find("input:not(:checked)").each(function (i, el) {
        $(".five-column > li.column").filter('[data-offer="' + el.id + '"]').show();
    });
});

jQuery(document).ready(function () {    
    //start filter
    jQuery('input[type=checkbox]')
    .on('change', function (e) {
        jQuery('.five-column > li.column[data-offer]').hide();
        jQuery('input[type=checkbox]:checked').each(function (i, elem) {    
            jQuery('.five-column > li.column[data-offer=' + elem.id + ']')
                .show()
        });
    }); //end filter

});

$(document).ready(function() {
        $('input[type=checkbox]').prop('checked', true);    
});

$('input[type=checkbox]').on('click', function(){
    var self = this;
    var status =  $(self).attr('id');
    var selElements = $('ul.five-column > li.column').filter(function(){
        return $(this).data("price") == status || $(this).data('offer') == status;
    });
    if (self.checked) {
        selElements.show();
    }  
    else {
        selElements.hide();
    }
});