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

Bin ich verwirrt zwischen HTML5 und jQuery? Bitte beraten. Vielen Dank!

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

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 auch alle Datennamen, die mit einem Unterstrich ('_') beginnen, für den internen Gebrauch.

Es ist zu beachten, dass jQuery's data()das dataAttribut in HTML nicht ändert .

Wenn Sie also das dataAttribut in HTML ändern müssen , sollten Sie .attr()stattdessen verwenden.

HTML

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

JS:

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>

Siehe diese Demo

Sie können auch Folgendes verwenden attr:

HTML

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

Skript

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

ODER

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

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

Wenn Sie mit jQuery Attribute in HTML-Elementen .data()festlegen data-, sollten Sie diese mit jQuery .data()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 die Konsole.

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

Vanille-Javascript-Lösung

HTML

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

JavaScript:

• Verwenden der DOM- 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

• Verwenden der JavaScript- datasetEigenschaft

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

Wenn Sie jQuery verwenden, verwenden Sie .data():

div.data('myval', 20);

Sie können beliebige Daten mit speichern .data(), sind jedoch bei der Verwendung nur auf Zeichenfolgen beschränkt .attr().

[jQuery] .data () vs .attr () vs .extend ()

Die jQuery-Methode .data()aktualisiert ein von jQuery verwaltetes internes Objekt mithilfe der Methode, wenn ich richtig bin.

Wenn Sie Ihre data-attributesmit etwas Verbreitung aktualisieren möchten , verwenden Sie -

$('body').attr({ 'data-test': 'text' });

- Andernfalls $('body').attr('data-test', 'text');funktioniert es einwandfrei.

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von -

$.extend( $('body')[0].dataset, { datum: true } );

- was jede Attributänderung auf beschränkt HTMLElement.prototype.dataset, nicht auf zusätzlicheHTMLElement.prototype.attributes .

Eine andere Möglichkeit, das Datenattribut festzulegen, ist die Verwendung der Dataset- Eigenschaft.

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

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

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