Toggle between boolean attributes JQuery

Question

I have an event listener that I'm trying to toggle between a class (which is working) and a data-selection attribute of true/false (which is not). I have the data-selection attribute for div class="dice" already set to false by default.

game.selection = function() {
  $(".dice").on("click", function() {
    $(this).toggle(function () {
      $(this).attr('data-selection', true);
    });
    $(this).toggleClass("active");
  }); 
};

I fiddled with the code more and got it to KIND of work: $(".dice").on("click", function() { if ($(this).attr('data-selection', false)) { $(this).attr('data-selection', true); } $(this).toggleClass("active"); }); The issue with this now is it changes the data-selection to true when clicked, but does not toggle back to false when clicked a second time. — colmol29
– colmol29, Commented Mar 29, 2016 at 2:38
$(this).attr('data-selection', $(this).attr('data-selection')=="false"); — dandavis
– dandavis, Commented Mar 29, 2016 at 2:39

Master DJon · Accepted Answer · 2016-03-29 02:41:28Z

2

Replace :

$(this).toggle(function () {
  $(this).attr('data-selection', true);
});

by :

$(this).attr('data-selection', ($(this).attr('data-selection') == "false" ? true : false));

answered Mar 29, 2016 at 2:41

Master DJon

1,9753 gold badges20 silver badges37 bronze badges

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

2 Comments

guradio Over a year ago

$(this).attr('data-selection', ($(this).attr('data-selection') == "false" ? true : false)); is same as $(this).attr('data-selection', $(this).attr('data-selection')=="false"); which is commented above :)

Master DJon Over a year ago

I agree, I saw you comment after posting my answer. (It was not there when I started writing it)

rrk · Accepted Answer · 2016-03-29 03:08:42Z

0

It is better if you use data() function instead of attr(). Also you can reduce the code to this.

$(this).data('selection', ! $(this).data('selection'));

answered Mar 29, 2016 at 3:08

rrk

15.9k4 gold badges32 silver badges49 bronze badges

2 Comments

guradio Over a year ago

if he set the data using .attr() will using .data() work?

rrk Over a year ago

@guradio no. it will not.

KyleMit · Accepted Answer · 2018-11-17 03:55:50Z

0

When you pass in two parameters to .attr(attributeName,value), the second param sets the value. You could write a custom extension, similar to toggleClass to conditionally add or .removeAttr() like this:

(function($) {
    $.fn.toggleAttr = function(attributeName, state) {
        return this.each(function() {
           if (state) {
             $(this).attr(attributeName,"")
           } else {
             $(this).removeAttr(attributeName)
           }
        });
    };
}(jQuery));

Then use like this:

$(".class").toggleAttr("boolAt", false);

answered Nov 17, 2018 at 3:55

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

Collectives™ on Stack Overflow

Toggle between boolean attributes JQuery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related