Strange data-attribute boolean issue

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 wo…

Accepted Answer

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!

Strange data-attribute boolean issue

Solution

Problem