Question

我使用Data属性来获取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元素。< / p>

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

使用数据属性切换类

2 个答案: