Question

在这里，我构建了一个小提琴，我无法想到如何.addClass所点击的data-id等于数据类别。看看小提琴，你会明白的更好。

这里我只是.addClass所有.item类，我不知道如何编写它以便它将类添加到与data-id匹配的数据类别。

未完成的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');

  });

这感觉有点不合理，但我没有弄乱这种写作（匹配数据属性）所以知识的一点点就会是惊人的。

答案： by：Sushanth -

$(".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

您可以使用此选择器

  $('.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

Answer 2

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以及此用途，这非常有用。

.addClass（）其中data-id等于data-category？

2 个答案: