Question

此功能允许用户按颜色过滤产品（使用data-attributes）。如何修改它以容纳多个值？

我希望该函数返回与所有数据属性的值匹配的所有项目，并在删除其中一个过滤器时恢复到其余过滤器的更严格条件（通过取消选中特定值或所有颜色值）。我在这里发布了一个简单的函数示例：http://jsfiddle.net/chayacooper/WZpMh/21/。该小提琴目前在data-attributes内有<li>个标签，但我想使用复选框以便进行多项选择。

修改产品的数据颜色（即黑色，白色）可以有多个值，表明它可以使用任何一种颜色，并且可以是多色（即黑与白）。

我假设代替 $(this).data('color') 我应该使用 $('input:checkbox:checked').data('color') 之类的东西，但我不确定如何构建它。

$(document).ready(function () {
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        $('#attributes-Colors').removeClass('active');
        $(this).parent().addClass('active');
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
            $('#content').find('li:not([data-color="' + attrColor + '"])').hide();
            $('#content').find('[data-color ~="' + attrColor + '"]').show();
        }
        return false;
    });
});

Answer 1

这是一种方法：

http://jsfiddle.net/WZpMh/20/

我没有为“所有颜色”链接添加任何处理，但这应该很容易做到

    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);
        }
        $("#content").find("*").hide();
        $.each(selected, function (index, item) {
            $('#content').find('[data-color ~="' + item + '"]').show();
        });
        return false;
    });

基本思想是保留所选颜色的数组，只要单击其中一个颜色按钮，您将隐藏所有项目，然后重新显示与selected数组中所有颜色匹配的项目。

对于all colors，您只需添加一些额外的逻辑即可将所有其他逻辑空白，并使所有项目都可见。

修改此查找功能以容纳多个值

1 个答案: