.addClass() где идентификатор данных равен категории данных?

Question

Здесь я построил скрипку, я не могу думать о том, как .addClass, где щелкнул идентификатор данных, равный категории данных. Взгляните на скрипку, вы поймете гораздо лучше.

Fiddle

Здесь я просто .addClass всем .item классов, я не знаю, как написать его так, что он добавляет класс к данным-категории, которая соответствует данным идентификатор.

Незаконченное JQuery Отрывок:

$(".breadcrumb-cell .breadcrumb").click(function() { 
     var theID = $(this).data("id"), 
      theCAT = $('.item').attr("data-category"), 
      item = $('.item') 

     //This just shows you that when you click the element it returns the data-id each click 
     alert(theID); 

     // Here I gave it a few shots but no success, so I just add .active to all 
     item.addClass('active'); 

    }); 

Это чувствует своего рода noobish но нету перепутались с этим видом пишут (соответствующие атрибуты данных), поэтому немного шишка знаний будет громадная.

Ответ:по: Сашанту -

$(".breadcrumb-cell .breadcrumb").click(function() { 
var theID = $(this).data("id"), 
    $allItem = $('.item'), 
    $currItem = $('.item[data-category=' + theID + ']') 

$currItem.addClass('active'); 
$allItem.not($currItem).removeClass('active'); 
}); 

Answer 1

fiddle

var items = $('.item'); 
$(".breadcrumb-cell .breadcrumb").click(function() { 
    var theID = $(this).data("id"); 

    items.filter(function() { 
     return $(this).data('category') === theID; 
    }).addClass('active'); 

}); 

Вы можете использовать метод filter. Это полезно, если вы собираетесь использовать items в другом месте, а также для этого.

Answer 2

Вы можете использовать этот селектор

$('.item[data-category=' + theID + ']').addClass('active'); 

Этот селектор соответствует всем элементам, которые имеют конкретный data-category

Код

$(".breadcrumb-cell .breadcrumb").click(function() { 
    // This will have the category 
    var theID = $(this).data("id"), 
    // All items 
     $allItem = $('.item'); 

    // Current item is should be active 
    var $currItem = $('.item[data-category=' + theID + ']'); 
    $('.item[data-category=' + theID + ']').addClass('active'); 
    // Remove the active class for other items 
    $allItem.not($currItem).removeClass('active'); 
}); 

Check Demo