获取数据属性并设置新值

Question

我无法让我的代码工作。

我选择我的元素，并尝试获取数据属性的值，并相应地更改值。

目录：

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

我想要将数据翻转设置为真或假，而不是警报。作为切换它的一种方式。

Answer 1

您可以使用

以下内容：

// 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")来选择元素，我可以看到您已经使用了$("flipUpMenuBox")。

Answer 2

>$("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 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的选择器中遗漏了#。