jquery - 获取数据属性并设置新值

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'));

$(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")。