1

我无法让此find功能与复选框一起正常工作。我无法选择任何复选框，因此被告知删除return false;我不确定是否是原因的声明，但该声明if (attrColor == 'All'){...}不再有效。

如何修改此功能以使其与复选框一起使用，包括如果选中则显示全部？

我在这里发布了一个简单的函数示例：http: //jsfiddle.net/chayacooper/WZpMh/92/

$(document).ready(function () {
    var selected = [];
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        var $this = $(this);
        if ($this.parent().hasClass("active")) {
            $this.parent().removeClass("active");
            selected.splice(selected.indexOf(attrColor),1);
        }
        else {
            $this.parent().addClass("active");
            selected.push(attrColor);
        }
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
        $("#content").find("*").hide();
        $.each(selected, function(index,item) {
            $('#content').find('[data-color *="' + item + '"]').show();
        });
        }
        // Removed this to allow checkboxes to accept input
        //return false;
    });
});
4

1 回答 1

0

仅针对复选框，而不是像 asterix 选择器那样的所有元素，并为复选框使用“更改”事件。

然后获取变量中所有的li元素lis，同时隐藏。

将所有选中的复选框颜色映射到带有$.map.

isAll检查该数组的值“All”以查看该复选框是否已选中，如果已选中，或者是否未选中任何复选框，即长度为空，则显示全部li's，否则使用 遍历选中的复选框中的颜色$.each，并显示任何与所选颜色匹配的 lis。

$(document).ready(function () {
    $('#attributes-Colors input[type="checkbox"]').on('change', function () {
        var lis = $('#content li').hide(),
            check = $.map($('#attributes-Colors input[type="checkbox"]'), function (el,i) {
                if (el.checked) return $(el).data('color');
            }),
            isAll = $.inArray('All', check) != -1;

        if (check.length && !isAll) {
            $.each(check, function(i,color) {
                lis.filter(function() {
                    return $(this).data('color').indexOf(color) != -1
                }).show();
            });
        } else {
            lis.show();
        }
    });
});

小提琴

于 2013-03-27T07:58:35.403 回答