webentwicklung-frage-antwort-db.com.de

Festlegen von Datenattributen in HTML-Elementen

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

Verwechsle ich HTML5 und jQuery? Bitte beraten. Vielen Dank!

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

jqueryhtmlcustom-data-attribute
194
Pulkit Mittal

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 Methode .data(), um Informationen unter den Namen 'events' und 'handle' zu speichern. Außerdem reserviert jenen Datennamen, der mit einem Unterstrich ('_') beginnt, für die interne Verwendung.

Es ist zu beachten, dass jQueries data() das data -Attribut in HTML nicht ändert.

Wenn Sie also das Attribut data in HTML ändern müssen, sollten Sie stattdessen .attr() 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

384
Jashwant

Sie können auch das folgende attr verwenden:

HTML

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

Skript

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

OR

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

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

Wenn Sie jQuery .data() verwenden, um data- -Attribute in HTML-Elementen festzulegen, sollten Sie jQuery .data() verwenden, um sie zu lesen. Andernfalls kann es zu Inkonsistenzen kommen, wenn Sie die Attribute dynamisch aktualisieren. Siehe beispielsweise setAttribute(), dataset(), attr() weiter 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>
32
Johann Echavarria

Vanilla Javascript Lösung

HTML

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

JavaScript:

  • Verwenden der Eigenschaft getAttribute() von DOM

     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 dataset -Eigenschaft von JavaScript

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

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

div.data('myval', 20);

Sie können beliebige Daten mit .data() speichern, bei Verwendung von .attr() sind jedoch nur Zeichenfolgen zulässig.

7
Blender

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

Die jQuery-Methode .data() aktualisiert ein internes Objekt, das von jQuery mithilfe der Methode verwaltet wird, sofern dies korrekt ist.

Wenn Sie Ihren data-attributes mit einem gewissen Spread aktualisieren möchten, verwenden Sie -

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

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

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

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

- was jede Attributänderung auf HTMLElement.prototype.dataset einschränkt, keine zusätzlichen HTMLElement.prototype.attributes.

3
Cody

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

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