데이터 속성을 얻을 내 코드가 동작하지 않습니다 새로운 가치

Question

을 설정 ..

을 난 내 요소를 선택하고 데이터의 속성의 값을 취득하려고하고 그에 따라 값을 변경합니다.

HTML :

<div class="flipUpMenu" id="flipUpMenuBox" data-flip="false"></div> 
<button id="flipElement">Flip Up </button> 

JS 대신 경고

$(document).ready(function() { 
    //buttons 
    var btnFlip = $("#flipElement"); 

    //elements 
    var flipUpElement = $("flipUpMenuBox"); 

    btnFlip.click(function(){ 
     if(flipUpElement.data('flip') === 'false'){ 
      alert("flip true"); 
     }else{ 
      alert("flip false"); 
     } 
    }); 
}); 

, 난 참 또는 거짓에 데이터 플립을 설정할 것입니다. 토글 방법. 난 당신이 $("flipUpMenuBox")을 사용했습니다 볼 수

// Select the element by id 

var flipUpElement = $("#flipUpMenuBox"); 

// Set the data 

flipUpElement.data('flip', true); 

// Get the data and log it 

console.log(flipUpElement.data('flip')); 

$(document).ready(function() { 
 
    var flipUpElement = $("#flipUpMenuBox"); 
 
    flipUpElement.data('flip', true); 
 
    console.log(flipUpElement.data('flip')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flipUpMenu" id="flipUpMenuBox" data-flip="false"></div>

또한

, 당신은 요소를 선택하지 $("flipUpMenuBox")$("#flipUpMenuBox")을 사용했는지 확인 :

Answer 1

$("flipUpMenuBox") 필요가 $("#flipUpMenuBox")

작업 니펫을 할 수 있습니다 : - 의도 한대로

$(document).ready(function() { 
 
    var btnFlip = $("#flipElement"); 
 
    var flipUpElement = $("#flipUpMenuBox"); 
 
    btnFlip.click(function(){ 
 
    if(flipUpElement.attr('data-flip') == 'false'){ // use == 
 
     flipUpElement.attr('data-flip','true'); 
 
    }else{ 
 
     flipUpElement.attr('data-flip','false'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flipUpMenu" id="flipUpMenuBox" data-flip="false"></div> 
 
<button id="flipElement">Flip Up </button>

Answer 2

는 다음을 사용할 수 있습니다 .

Answer 3

if(flipUpElement.data('flip') === 'false'){ 

이 작동하지 않습니다. jQuery .data()은 데이터 속성을 JSON으로 구문 분석하려고 시도하고 성공하면 구문 분석 된 값을 반환합니다. 따라서 "false"은 문자열을 반환하는 대신 부울 false으로 변환됩니다. 더 간단하게

if(flipUpElement.data('flip')) { 
    flipUpElement.data('flip', false); 
} else { 
    flipUpElement.data('flip', true); 
} 

나 :

flipUpElement.data('flip', !flipUpElement.data('flip')); 

을 그리고 다른 사람들이 지적으로 선택이 flipUpElement을 설정하는 데 사용, 당신은 #을 왼쪽

그래서 당신은 그것을 변경해야합니다.