获取数据属性并设置新值

Question

我无法让我的代码工作..

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

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

我想将数据翻转设置为 true 或 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") 到 select 元素，我可以看到您使用了 $("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，如果成功，则 returns 解析值。所以 "false" 将被转换为布尔值 false 而不是返回字符串。

所以你应该把它改成：

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

或更简单地说：

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

正如其他人指出的那样，您在用于设置 flipUpElement 的选择器中遗漏了 #。

获取数据属性并设置新值

get data attribute and set new value

jquery

custom-data-attribute