Question

我使用输入复选框过滤包含数据属性的列表项。

当检查特定输入项时，所有元素都会被隐藏，即使它们与选中的值无关。

这是我的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

});

这里是JSFiddle

解决方案我正在寻找

如何使此过滤正常工作，所有项目应在页面加载时可见，但检查输入值时，仅显示这些项目。隐藏其他一切。

Answer 1

http://jsfiddle.net/BramVanroy/qqswmnyd/7/

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

或者，如果您要显示未选中的项目：http://jsfiddle.net/BramVanroy/qqswmnyd/8/

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

Answer 2

我稍微更改了代码以检查页面加载时的输入，以向用户显示他们正在查看的内容是默认选择。如果这会妥协，那么可以改变它。

请参阅Fiddle。

这是我的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();
    }
});

Answer 3

尝试在data-offer

替换date-offer 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

});

jsfiddle http://jsfiddle.net/qqswmnyd/5/

Answer 4

更改您的代码

这

...

lis.hide();                        
jQuery('.five-column > li.column').filter(selector).show();

...

要 ...

lis.hide();                        
setTimeout(function() {
   jQuery('.five-column > li.column').filter(selector).show()
}, 1000); // force a 1 sec delay before execution

...

jQuery - 过滤数据属性隐藏所有元素

4 个答案: