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

【问题标题】：jQuery - Filtering data-attributes hides all elementsjQuery - 过滤数据属性隐藏所有元素
【发布时间】：2015-08-23 06:57:35
【问题描述】：

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

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

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

我正在寻找的解决方案

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

【问题讨论】：

那么你的问题是什么？
请注意 - 您使用的是哪个 jQuery 版本？从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。
似乎你先隐藏所有 li 然后显示与选中复选框相关的
，我认为这将永远不会工作，因为 jquery 运行异步，它不知道哪个先出现，所以隐藏/显示同时发生，并且可能隐藏在比赛条件下最后完成。您可以通过 setTimeout
的显示中延迟执行来进行破解

【解决方案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();
    });
});

【讨论】：

这太好了...我可以显示所有加载的项目然后过滤它吗？
哇...就是这样..:) 如果您不介意的话，您的 jQuery 就更完美了。未选中输入时，项目应该显示正确吗？
感谢解答，我还有一些需要更改这个功能，我想我应该单独问一下。

【解决方案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();
    }
});

【讨论】：

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

【解决方案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/

【讨论】：

这是我的数据属性代码中的错字，我已在我的问题中进行了更新。它的data-offer

【解决方案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

...

【讨论】：

它的工作.. 但延迟给布局留下了不好的印象。还有其他可能吗？或显示某种加载 div？