Question

我有一个div，如下所示

<div class="addonsQtyWrap">
      <ul>
         <li data-vendoritemid="844" data-tabid="1" class="tabclcik active">Qty-1</li>
         <li data-vendoritemid="844" data-tabid="2" class="tabclcik active">Qty-2</li>
         <li data-vendoritemid="844" data-tabid="3" class="tabclcik">Qty-3</li>
         <li data-vendoritemid="844" data-tabid="4" class="tabclcik active">Qty-4</li>
      </ul>
   </div>

如你所见，其中一些可能有活跃类，其中一些没有。

我的要求是，我需要将活动类仅添加到数组中，并删除类活动不存在于数组

中

我试过这种方式

 var activequantities  = ["1","4"];

for(var i=0;i<activequantities.length;i++)
{
var tabnumber = activequantities[i];
$("#popupinner844").find('.tabclcik[data-tabid="' + tabnumber + '"]').addClass('active');    
}

根据我的要求提供样本数据（数组1和4），我需要将仅激活的类添加到1和4，同时删除2和3上激活的类。

但是我无法移除不属于数组的活动类

你可以告诉我如何实现这个目标。

http://jsfiddle.net/cod7ceho/52/

Answer 1

您可以使用以下内容：

var activequantities = ["1","4"];
$("li.tabclcik").removeClass('active').filter(function () {
    return $.inArray($(this).data('tabid').toString(), activequantities) > -1
}).addClass('active');

<强> jsFiddle example

您选择列表项，从所有列中删除该类，然后通过检查数组中是否出现数据属性进行过滤，并仅将活动类添加到这些元素中。

Answer 2

以下函数遍历所有<li>元素，然后根据您定义的数组检查data-tabid属性。如果属性在数组中，则添加该类，否则删除该类。

您可以运行代码段作为工作示例。

＆＃13;

$(function() {
  var activequantities  = ["1","4"];

  $(".addonsQtyWrap li").each(function() {
    var $this = $(this);
    var dataTabId = $this.attr("data-tabid");
    if (activequantities.indexOf(dataTabId) < 0)
      $this.removeClass("active");
    else
      $this.addClass("active");
  });
});

＆＃13;

.active { background-color: blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addonsQtyWrap">
      <ul>
         <li data-vendoritemid="844" data-tabid="1" class="tabclcik active">Qty-1</li>
         <li data-vendoritemid="844" data-tabid="2" class="tabclcik active">Qty-2</li>
         <li data-vendoritemid="844" data-tabid="3" class="tabclcik">Qty-3</li>
         <li data-vendoritemid="844" data-tabid="4" class="tabclcik active">Qty-4</li>
      </ul>
</div>

＆＃13;

Answer 3

您可以使用each()方法，然后检查indexOf()数组

var activequantities  = ["1","4"];

$("ul li").each(function(){
if(activequantities.indexOf($(this).data("tabid").toString())!=-1){
$(this).addClass("active");
}
else
$(this).removeClass("active");

})

工作演示：

＆＃13;

var activequantities  = ["1","4"];
$("ul li").each(function(){
   console.log(activequantities.indexOf($(this).data("tabid")))
if(activequantities.indexOf($(this).data("tabid").toString())==-1){
   $(this).removeClass("active");
}
 else
   $(this).addClass("active");

})

＆＃13;

.active { color: yellow; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addonsQtyWrap">
      <ul>
         <li data-vendoritemid="844" data-tabid="1" class="tabclcik active">Qty-1</li>
         <li data-vendoritemid="844" data-tabid="2" class="tabclcik active">Qty-2</li>
         <li data-vendoritemid="844" data-tabid="3" class="tabclcik">Qty-3</li>
         <li data-vendoritemid="844" data-tabid="4" class="tabclcik active">Qty-4</li>
      </ul>
</div>

＆＃13;

Answer 4

试试这个javascript：

 var activequantities  = ["1", "4"];

 // remove all occurrences of active class
 $("#popupinner844 .tabclcik").removeClass('active');

 // selectively add active class back according to array contents above
 for(var i=0;i<activequantities.length;i++) {
   var tabnumber = activequantities[i];
   $("#popupinner844").find("[data-tabid='" + tabnumber + "']").addClass('active');    
}

如何根据数组值添加和删除类

4 个答案: