Using JQuery to edit Data attributes on specific DOM elements

Question

I put in the alerts because the changes were not showing when I did inspect element. However, when I click on the object the first time it brings up the "data is now false" alert as if I had already clicked it once.

HTML:

<li class="media-thumb" data-select="false"><img src="IMG HERE"></li>

Javascript:

 $(document).ready(function() {


    $(".media-thumb").click(function() {
        if($(this).data("select") === "false") 
            {
                alert("data is now true")
                $(this).data("select", "true");


            }
        else
            {
                alert("data is now false")
                $(this).data("select", "false");

            }
    });

});

in the selector $(".media-thumb") do you mean $(".image-thumb") — Netorica
– Netorica, Commented Sep 20, 2013 at 3:13

Paul Roub · Accepted Answer · 2013-09-20 03:20:13Z

3

The data-select attribute is being returned as boolean false (per the jQuery docs: "Every attempt is made to convert the string to a JavaScript value"), not a string.

So you can actually write:

$(".media-thumb").click(function() {
    if(! $(this).data("select")) 
        {
            alert("data is now true")
            $(this).data("select", true);
        }
    else
        {
            alert("data is now false")
            $(this).data("select", false);
        }
});

Example CodePen: http://codepen.io/paulroub/pen/Bnvub

edited Sep 20, 2013 at 3:20

answered Sep 20, 2013 at 3:14

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Using JQuery to edit Data attributes on specific DOM elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related