이상한 데이터 속성 부울 문제

Question

& 내용을 닫을 때 위/아래로 넘기는 화살표가있는 머리글의 실시간 클릭 이벤트가 있습니다.

가장 이상한 일은 ! 다음에 변수 (true -> false, 또는 그 반대)를 뒤 따르는 것입니다. 기본적으로 그것은 전혀 작동하지 않으며 거짓으로 뒤집혀서 거기에 머물러 있습니다 ... 내가 무슨 뜻인지 알아보기 위해 바이올린을 확인하십시오.

간결함을 위해 많은 코드를 삭제했습니다. 나는 다음과 같은 경우

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

나는 그것을 완벽하게 잘 작동 얻을 수 있습니다 :이가 정상적으로 작동하지 왜 내가 부족 뭔가

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

있습니까? ? 왜 이런 일을하는지 궁금해!

Answer 1

나는이 작업을 수행하려고 생각 :

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

그렇다면, 문제는 변환 그래서 만약 당신이 문자열을 반환 .attr()을 사용하는 것이 었습니다 :

!"true" //false 

!"false" //false 

한편 .data()은 이미 캐스팅 된 값을 반환합니다.

EDIT : 당신이 수, 당신이 정말로 .attr()을 사용하고 싶었 그래서 경우

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

하지만 먼저 당신이하는 것이 좋습니다 :

그냥, 더 명확하게하기 위해 자바 스크립트 유일한 falsy 값은

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

행운을 빌어 요!

Answer 2

변경에 두 번째 라인 :

var _state = $(this).attr('data-state') == 'true'; 

그리고 부울에 대한 if 문 체크 인은 :

if (_state) { 
// do stuff 
... 

Answer 3

_state는 당신이 필요로하는 문자열 (=== 문자열 // 사실과 typeof _state)입니다 먼저 부울로 변환하십시오 (문자열이 true 임)

Answer 4

data- 속성을 실제로 사용하려면 jQuery의를 사용하십시오값을 검색하고 설정하는 방법.자동으로 숫자로 부울 또는 문자열 "1"로 문자열 "true"로 변환됩니다 : 당신이 클래스를 전환 할 수

$(document).on('click', '.regimenHeader', function() { 
    var _state = $(this).data('state'); 
    if (_state) { 
     // do something 
    } 
    $(this).data('state', !_state); 
});​ 

http://jsfiddle.net/mblase75/JKUJb/6/

또는 - 당신이에 .hasClass 방법을 사용할 수 있습니다 부울을 반환 : 내가 .DATA`에 충실 것

$(document).on('click', '.regimenHeader', function() { 
    var _state = $(this).hasClass('data-state'); 
    if (_state) { 
     // do something 
    } 
    $(this).toggleClass('data-state'); 
});​ 

http://jsfiddle.net/mblase75/JKUJb/3/