使用jQuery根据来自div的多个属性动态创建复选框

Question

我希望 jQuery 根据 div 中存在的类/数据动态创建复选框列表。本质上，这些复选框将过滤产品，以便单击复选框将在其 div 中显示包含该标签的产品，同时避免任何重复的复选框。

样本：

<div class="Shoes" data-size="Small" data-color="Black">
     <h3>Nike</h3>
</div>
<div class="Belts" data-size="Medium" data-color="Black">
     <h3>Belt</h3>
</div>
<div class="Shirt" data-size="Large" data-color="Blue">
     <h3>Polo</h3>
</div>
<div class="Socks" data-size="Small" data-color="White">
     <h3>Generic Socks</h3>
</div>

预期输出类别类型

• 鞋
• 腰带
• 衬衫
• 袜子

尺寸

• 小的
• 中等的
• 大的

颜色

• 黑色的
• 白色的
• 蓝色

每个复选框都需要能够隐藏/显示该项目。

JsFIDDLE

到目前为止，我的代码来自搜索/以前的答案，但是它只创建了 1 个用于“类”的复选框类型，而不是创建多个复选框。

Answer 1

尝试

jQuery(function ($) {

    function createCheckboxes($els, attr) {
        var props = {};
        $els.each(function () {
            props[$(this).attr(attr)] = true;
        });

        return $.map(props, function (val, key) {
            var $chk = $('<input />', {
                type: 'checkbox',
                value: key
            })
            return $('<label />', {
                text: key
            }).append($chk)
        })
    }

    $('span').append(createCheckboxes($('div'), 'class'))
    $('span').append(createCheckboxes($('div'), 'data-size'))
    $('span').append(createCheckboxes($('div'), 'data-color'))
});

演示：小提琴