切換類具有數據屬性

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");