erhalten Attributdaten und setzen neue Wert

Question

ich meinen Code bekommen zu arbeiten ..

ich meine Elemente auswählen und versuchen, den Wert eines Datenattribut zu erhalten, und den Wert entsprechend ändern.

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

Statt Warnungen, würde ich möchte entweder wahr oder falsch, um die Daten-Flip einzustellen. Als eine Möglichkeit, es umzuschalten.

Answer 1

$("flipUpMenuBox") Notwendigkeit $("#flipUpMenuBox")

Arbeits Snippet sein: -

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

können Sie verwenden, um die folgenden:

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

Also, stellen Sie sicher, dass Sie $("#flipUpMenuBox") nicht $("flipUpMenuBox") verwendet haben, um das Element zu wählen, kann ich sehen Sie $("flipUpMenuBox") verwendet haben .

Answer 3

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

nicht wie vorgesehen. jQuery .data() versucht, das Datenattribut als JSON zu analysieren. Wenn dies erfolgreich ist, wird der analysierte Wert zurückgegeben. So wird "false" in eine boolesche false konvertiert, anstatt die Zeichenfolge zurückzugeben.

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

oder einfacher:

So sollten Sie es ändern

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

Und wie andere haben darauf hingewiesen, links können Sie die # aus in die Auswahl flipUpElement einzustellen verwendet.