修改此功能，以顯示/隱藏數據屬性，而不是按類

Question

我想通過數據屬性而不是類使用此顯示/隱藏功能，但我很難得到正確的語法。

我知道這是這樣的$("li[data-color=" + this.value + "]").show();，但我一直沒有能夠得到它的工作和/或修改該功能，使其工作。

我使用的功能來過濾各種屬性衣物（如顏色，產品類別，場合等），我已經貼了撥弄着一個簡單的例子在這裏：http://jsfiddle.net/chayacooper/WZpMh/4/

$('#filterOptions li a').click(function() { 
    var ourClass = $(this).attr('class'); 
    $('#filterOptions li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    if (ourClass == 'all') { 
     $('#content').find('.item').show(); 
    } else { 
     $('#content').find('.item:not(.' + ourClass + ')').hide(); 
     $('#content').find('.item.' + ourClass).show(); 
    } 
    return false; 
}); 

Answer 1

請參閱本搗鼓工作示例：http://jsfiddle.net/Cr2cY/

$(document).ready(function() { 
    $('#filterOptions li a').click(function() { 
     // fetch the class of the clicked item 
     var ourDataAttr = $(this).data('color'); 
     // reset the active class on all the buttons 
     $('#filterOptions li').removeClass('active'); 
     // update the active state on our clicked button 
     $(this).parent().addClass('active'); 
     if (ourDataAttr == 'All') { 
      // show all our items 
      $('#content').find('.item').show(); 
     } else { 
      // hide all elements that don't share ourClass 
      $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide(); 
      // show all elements that do share ourClass 
      $('#content').find('.item[data-color="' + ourDataAttr + '"]').show(); 
     } 
     return false; 
    }); 
}); 

注意，你在你的提琴「全部」，這將不符合比較「所有」。