使用数据属性切换类 [英] Toggle Class with Data-attribute

问题描述

我正在使用数据属性来获取jQuery中的元素，如下所示

I am using Data attributes to get an element in jQuery as below

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

我们可以使用这种方式，但它似乎不起作用吗？

Can we use this way but it does not seem to work?

推荐答案

使用 $（this）来引用每个中的当前元素。 dataTarget 是一个字符串，你不能在其上调用jQuery方法 dataTarget.toggleClass（collapse expand）;

Use $(this) to refer to the current element in the each. dataTarget is a string, you cannot call jQuery method on it dataTarget.toggleClass("collapse expand");

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

---

无需循环，请使用属性值选择器进行选择所有< span> 元素的箭头和数据目标的值为 tgrt1 。

---

No need of looping, use attribute-value selector to select all the <span> elements having class of arrow and data-target value as tgrt1.

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

这篇关于使用数据属性切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！