Ho un div con un attributo data-myval = "10". Voglio aggiornarne il valore; non cambierebbe se uso div.data('myval',20)? Devo usare div.attr('data-myval','20')solo?

Mi sto confondendo tra HTML5 e jQuery? Si prega di avvisare. Grazie!

EDIT: aggiornato div.data('myval')=20a div.data('myval',20), ma l'HTML non si aggiorna ancora.

HTML

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

JS

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

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

dimostrazione

Riferimento

Dal riferimento:

jQuery stesso utilizza il .data()metodo per salvare le informazioni sotto i nomi 'events' e 'handle', e inoltre riserva qualsiasi nome di dati che inizia con un trattino basso ('_') per uso interno.

Va notato che jQuery data()non modifica l' dataattributo in HTML.

Pertanto, se è necessario modificare l' dataattributo in HTML, è necessario utilizzare .attr()invece.

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>

Guarda questa demo

Puoi anche usare la seguente attrcosa;

HTML

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

copione

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

O

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

Si noti che jQuery .data()non viene aggiornato quando si modificano gli data-attributi html5 con javascript.

Se usi jQuery .data()per impostare gli data-attributi negli elementi HTML, è meglio usare jQuery .data()per leggerli. Altrimenti possono esserci incoerenze se si aggiornano gli attributi in modo dinamico. Ad esempio, vedere setAttribute(), dataset(), attr()di seguito. Modificare il valore, premere più volte il pulsante e vedere la console.

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

Soluzione Javascript alla vaniglia

HTML

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

JavaScript:

• Utilizzando la getAttribute()proprietà di 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
  

• Utilizzando la datasetproprietà di 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
  

Se stai usando jQuery, usa .data():

div.data('myval', 20);

Puoi archiviare dati arbitrari con .data(), ma sei limitato a stringhe solo quando lo usi .attr().

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

Il metodo jQuery .data()aggiorna un oggetto interno gestito da jQuery attraverso l'uso del metodo, se corretto.

Se desideri aggiornare il tuo data-attributescon un po 'di diffusione, usa -

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

- altrimenti, $('body').attr('data-test', 'text');funzionerà bene.

Un altro modo per farlo è usare -

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

- che limita qualsiasi modifica dell'attributo a HTMLElement.prototype.dataset, non ulterioreHTMLElement.prototype.attributes .

Un altro modo per impostare l'attributo di dati è usare la proprietà del set di dati .

<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

Per mantenere sincronizzati jQuery e DOM, potrebbe essere una semplice opzione

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