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

我想要将数据翻转设置为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'));

＆＃13;

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

＆＃13;

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

＆＃13;

另外，请确保您已使用$("#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。

获取数据属性并设置新值

3 个答案: