当前位置 : 主页 > 网页制作 > JQuery >

jquery – .addClass()其中data-id等于data-category?

来源:互联网 收集:自由互联 发布时间:2021-06-15
在这里我构建了一个小提琴,我无法想到如何.addClass所点击的data-id等于数据类别.看看小提琴,你会明白得多. Fiddle 在这里,我只是.addClass到所有.item类,我不知道如何编写它,以便它将类添加
在这里我构建了一个小提琴,我无法想到如何.addClass所点击的data-id等于数据类别.看看小提琴,你会明白得多.

Fiddle

在这里,我只是.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');

  });

这感觉有点蠢,但我没有搞砸这种写作(匹配数据属性)所以一点点知识将是惊人的.

答案::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');
});
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方法.如果您要在其他地方使用项目以及此操作,这将非常有用.

网友评论