使用jQuery動態創建基於div的多個屬性的複選框

Question

我希望jQuery能夠根據divs中存在的類/數據來創建複選框列表。實質上，這些複選框將對產品進行過濾，以便點擊複選框將顯示包含該標籤的產品，同時避免任何重複的複選框。

樣品：

<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')) 
}); 

演示：Fiddle

Answer 2

試試這個http://jsfiddle.net/LzmTA/1/

HTML

<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> 

Java類CRIPT

$(document).ready(function(){ 
    var goods = {}; 
    var divs = $('div'); 

    for(var i = 0; i < divs.length; i++){ 
     var attributes = divs[i].attributes; 
     var item = {}; 
     for(var j = 0; j < attributes.length; j++){ 
      var attrName = attributes[j].name; 
      if(!goods[attrName]){ 
       goods[attrName] = {}; 
      } 
      goods[attrName][attributes[j].value] = 1; 
     } 
    } 

    printAttributes(goods); 

    console.log(goods); 
}); 

function printAttributes(goods){ 
    for(var group in goods){ 
     var groupTitle = $('<h3>').text(group); 
     $('span').append(groupTitle); 
     for(var item in goods[group]){ 
      console.log(item); 
      var sp = $('<label>').text(item); 
      var chk = $('<input>').attr('type', 'checkbox').attr('value', item).attr('attr', group); 
      chk.bind('change', function(){ 
       filterGoods(); 
      }); 
      $('span').append(chk).append(sp); 
     } 
    } 
} 

function filterGoods(){ 
    var separator = '|'; 
    var chks = $('input[type=checkbox]:checked'); 
    var filter = []; 

    //get filter 
    for(var i = 0; i < chks.length; i++){ 
     var item = $(chks[i]).attr('attr') + separator + $(chks[i]).val(); 
     filter.push(item); 
    } 

    //do filter 
    var hasAttr = false; 
    var divs = $('div'); 
    for(var i = 0; i < divs.length; i++){ 
     hasAttr = false; 
     for(var j = 0; j < filter.length; j++){ 
      var filterParts = filter[j].split(separator); 
      if($(divs[i]).attr(filterParts[0]) == filterParts[1]){ 
       hasAttr = true; 
       continue; 
      } 
     } 

     hasAttr ? $(divs[i]).show() : $(divs[i]).hide();   
    } 

    console.log(filter); 
}