Saya memiliki div dengan atribut data-myval = "10". Saya ingin memperbarui nilainya; bukankah itu akan berubah jika saya gunakan div.data('myval',20)? Apakah saya hanya perlu menggunakan div.attr('data-myval','20')?

Apakah saya bingung antara HTML5 dan jQuery? Mohon saran. Terima kasih!

EDIT: Diperbarui div.data('myval')=20ke div.data('myval',20), tetapi HTML tetap tidak diperbarui.

HTML

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

JS

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

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

Demo

Referensi

Dari referensi:

jQuery sendiri menggunakan .data()metode untuk menyimpan informasi di bawah nama 'peristiwa' dan 'pegangan', dan juga menyimpan nama data apa pun yang dimulai dengan garis bawah ('_') untuk penggunaan internal.

Perlu dicatat bahwa jQuery data()tidak mengubah dataatribut di HTML.

Jadi, jika Anda perlu mengubah dataatribut di HTML, Anda harus menggunakan .attr().

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>

Lihat demo ini

Anda juga dapat menggunakan attrhal berikut ;

HTML

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

Naskah

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

ATAU

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

Solusi Vanilla Javascript

HTML

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

JavaScript:

• Menggunakan getAttribute()properti 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
  

• Menggunakan datasetproperti 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
  

Harap perhatikan bahwa jQuery .data()tidak diperbarui saat Anda mengubah data-atribut html5 dengan javascript.

Jika Anda menggunakan jQuery .data()untuk mengatur data-atribut dalam elemen HTML, Anda sebaiknya menggunakan jQuery .data()untuk membacanya. Jika tidak, dapat terjadi inkonsistensi jika Anda memperbarui atribut secara dinamis. Sebagai contoh, lihat setAttribute(), dataset(), attr()di bawah ini. Ubah nilainya, tekan tombol beberapa kali dan lihat konsol.

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

Jika Anda menggunakan jQuery, gunakan .data():

div.data('myval', 20);

Anda dapat menyimpan data arbitrer dengan .data(), tetapi Anda dibatasi hanya dengan string saat menggunakan .attr().

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

Metode jQuery .data()memperbarui objek internal yang dikelola oleh jQuery melalui penggunaan metode, jika saya benar.

Jika Anda ingin memperbarui data-attributesdengan beberapa spread, gunakan -

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

- jika tidak, $('body').attr('data-test', 'text');akan bekerja dengan baik.

Cara lain untuk melakukannya adalah dengan menggunakan -

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

- yang membatasi perubahan atribut apa pun HTMLElement.prototype.dataset, bukan tambahan apa punHTMLElement.prototype.attributes .

Cara lain untuk menyetel atribut data adalah menggunakan properti dataset .

<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

Untuk menjaga jQuery dan DOM tetap sinkron, opsi sederhana mungkin adalah

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