Question

I have a live -on click- event for a Header which has an arrow flipping up/down upon opening & closing it’s contents.

The strangest thing is happening with ! followed by a variable — which is supposed to flip it from true -> false, and vice versa. Basically it’s not working at all, and it flips to false and stays there… Check out the fiddle to see what I mean.

I’ve deleted lots of code for the sake of brevity.

Demo Code

$(document).on('click', '.regimenHeader', function () {
    var _state = $(this).attr('data-state');

    if (_state === 'true') {
        // do stuff
    }

    else { 
        // do stuff
    }

    // This is where the issue is happening, it isn't flipping the Boolean value
    // !"true" = false, !true = false, it works with strings or booleans
    $(this).attr('data-state', !_state);
});​

I can get it working perfectly fine if I do the following:

    if (_state === 'true') {
        // Manually flip the data-state boolean
        $(this).attr('data-state', false);
    }

Is there something I’m missing why this isn’t working the way it should ?? Just wondering why it’s doing this!

Answer 1

I think you are trying to do this:

http://jsfiddle.net/JKUJb/2/

if so, the problem was that you are using .attr() which returns a string, so if you convert:

!"true" //false

!"false" //false

.data() on the other hand returns the value already “casted

EDIT:

Just to be more clear, in javascript the only falsy values are:

false;
null;
undefined;
'';
0;
NaN;

So if you really wanted to use .attr(), you could, but I recommend that first you do:

var _state = $(this).attr('data-state') === 'true'; //if 'true' then true, false otherwise

Good luck!