3

在这里，我构建了一个小提琴，我想不出.addClass点击的数据 ID 等于数据类别的位置。看看小提琴，你会明白得多。

小提琴

在这里，我只是.addClass针对所有.item类，我不确定如何编写它以便将类添加到与数据 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');

  });

这感觉有点无聊，但我没有搞砸这种写（匹配数据属性），所以一点点知识就会非常棒。

答案： 作者：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');
});
4

2 回答 2

6

您可以使用此选择器

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

检查演示

于 2013-08-08T21:56:47.090 回答
1

小提琴

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其他地方以及为此使用，这将非常有用。

于 2013-08-08T21:59:09.940 回答