jquery - 具有数据属性的 Toggle 类

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>具有 arrow 和 data-target 类的元素值为tgrt1 .

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