2

此功能允许用户按颜色过滤产品（使用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;
    });
});
4

1 回答 1

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你可以简单地添加一些额外的逻辑来空白所有其他的并使你所有的项目可见。

于 2013-03-25T20:52:59.387 回答