Toggle Class with Data-attribute

Question

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 is

$("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?

Tushar · Accepted Answer · 2015-10-27 10:40:27Z

3

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

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

edited Oct 27, 2015 at 10:40

answered Oct 27, 2015 at 6:12

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tushar Over a year ago

@Gags No, you're not, use $(this) to refer to the current element. Check update

Gags Over a year ago

yup.. this is fine. You are editing like anything :)

Tushar · Accepted Answer · 2015-10-27 06:43:17Z

1

dataTarget variable contains string. You cannot use jQuery function onto a string.

dataTarget.toggleClass("collapse expand");

You need to replace with

$(this).toggleClass("collapse expand");

edited Oct 27, 2015 at 6:43

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Oct 27, 2015 at 6:16

ebilgin

1,25210 silver badges19 bronze badges

Collectives™ on Stack Overflow

Toggle Class with Data-attribute

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related