切换类具有数据属性

Question

我使用的数据属性得到jQuery的一个元素，如下

<a class="toggleArrow">Toggle Me</a> 
<span class="arrow collapse" data-target="trgt1"> 
    <i class=fa fa-arrow-right""></i> 
</span> 

<span class="arrow collapse" data-target="trgt2"> 
    <i class=fa fa-arrow-left""></i> 
</span> 

jQuery是

$("a.toggleArrow").off().on("click", function() { 
    $("span.arrow").each(function() { 
     var dataTarget = $(this).data("target"); 
     if (dataTarget == "tgrt1") { 
      dataTarget.toggleClass("collapse expand"); 
     } 
    }); 
}); 

我们可以用这样的方式，但它似乎不工作？

Answer 1

使用$(this)来指代each中的当前元素。 dataTarget是一个字符串，你不能把它dataTarget.toggleClass("collapse expand");

if ($(this).data('target') == 'tgrt1') { 
    $(this).toggleClass("collapse expand"); 
    //^^^^^ 
} 

---

jQuery的方法无需循环的，用attribute-value selector选择具有类箭头所有<span>元素和data-target价值tgrt1。

$("a.toggleArrow").off().on("click", function() { 
    $("span.arrow[data-target='tgrt1']").toggleClass("collapse expand"); 
}); 

Answer 2

dataTarget变量包含字符串。你不能在一个字符串上使用jQuery函数。

dataTarget.toggleClass("collapse expand"); 

您需要

$(this).toggleClass("collapse expand");