Wie man Datenattribute in HTML-Elementen setzt

Question

Ich habe ein div mit einem Attribut data-myval = "10" . Ich möchte seinen Wert aktualisieren; würde er sich nicht ändern, wenn ich div.data('myval',20) ? Benötige ich div.attr('data-myval','20') nur?

Komme ich zwischen HTML5 und jQuery durcheinander? Bitte beraten Sie mich. Danke!

EDIT: Aktualisiert div.data('myval')=20 a div.data('myval',20) aber der HTML-Code wird immer noch nicht aktualisiert.

Answer 1

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

Referenz

Aus der Referenz:

jQuery selbst verwendet die .data() Methode, um Informationen unter den Namen "events" und "handle" zu speichern, und reserviert außerdem alle Datennamen, die mit einem Unterstrich ("_") beginnen, für die interne Verwendung.

Es ist zu beachten, dass jQuery's data() ändert nichts an der data Attribut in HTML.

Wenn Sie also die data Attribut in HTML verwenden, sollten Sie .attr() stattdessen.

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

jQuery:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

Voir diese Demo

Answer 2

Vanilla-Javascript-Lösung

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

• Die Verwendung von DOMs getAttribute() Eigenschaft

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

• Die Verwendung der JavaScript dataset Eigenschaft

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute

Answer 3

Sie können auch Folgendes verwenden attr Sache;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

Drehbuch

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

OR

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

Answer 4

Bitte beachten Sie, dass jQuery .data() wird nicht aktualisiert, wenn Sie html5 ändern data- Attribute mit Javascript.

Wenn Sie jQuery verwenden .data() zum Einstellen data- Attribute in HTML-Elementen verwenden Sie besser jQuery .data() um sie zu lesen. Andernfalls kann es zu Inkonsistenzen kommen, wenn Sie die Attribute dynamisch aktualisieren. Siehe zum Beispiel setAttribute() , dataset() , attr() unten. Ändern Sie den Wert, drücken Sie die Taste mehrmals und sehen Sie sich die Konsole an.

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

Answer 5

Um jQuery und das DOM synchron zu halten, kann eine einfache Option sein

$('#mydiv').data('myval',20).attr('data-myval',20);