Переключение класса с данными атрибутом

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 является строкой, то вы не можете вызвать метод JQuery на нем dataTarget.toggleClass("collapse expand");

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

---

Нет необходимости зацикливания, используйте 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");