Özelliğe sahip bir div var data-myval = "10". Değerini güncellemek istiyorum; kullanırsam değişmez div.data('myval',20)mi? div.attr('data-myval','20')Yalnızca kullanmam gerekiyor mu?

HTML5 ve jQuery arasında kafam karışıyor mu? Tavsiye lütfen. Teşekkürler!

DÜZENLEME: Güncelleme div.data('myval')=20için div.data('myval',20), ama yine de HTML güncellenmesi değildir.

HTML

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

JS

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

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

gösteri

Referans

Referanstan:

jQuery, .data()yöntemi 'olaylar' ve 'tanıtıcı' adları altında kaydetmek için yöntemi kullanır ve ayrıca dahili kullanım için alt çizgi ('_') ile başlayan tüm veri adlarını saklar.

JQuery'nin HTML'deki niteliği data()değiştirmediğine dikkat edilmelidir data.

Bu nedenle, dataHTML'deki niteliği değiştirmeniz gerekirse .attr()bunun yerine kullanmanız gerekir .

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>

Bu demoya bakın

Ayrıca aşağıdakileri de kullanabilirsiniz attr;

HTML

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

Senaryo

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

VEYA

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

Javascript ile .data()html5 data-özniteliklerini değiştirdiğinizde jQuery'nin güncellenmediğini lütfen unutmayın .

JQuery kullanıyorsanız .data()setine data-daha iyi jQuery kullanmak niteliklerini HTML öğelerinde .data()onları okumak için. Aksi takdirde, öznitelikleri dinamik olarak güncellerseniz tutarsızlıklar olabilir. Örneğin, bakınız setAttribute(), dataset(), attr()aşağıda. Değeri değiştirin, düğmeye birkaç kez basın ve konsolu görün.

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

Vanilya Javascript çözümü

HTML

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

JavaScript:

• DOM getAttribute()mülkünü kullanma

   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
  

• JavaScript'in datasetözelliğini kullanma

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

JQuery kullanıyorsanız, şunu kullanın .data():

div.data('myval', 20);

İle rastgele veri depolayabilirsiniz .data(), ancak kullanırken sadece dizelerle sınırlandırılırsınız .attr().

[jQuery] .data () ve .attr () ve .extend () karşılaştırması

JQuery yöntemi .data(), eğer doğruysam, jQuery tarafından yönetilen bir iç nesneyi yöntem kullanarak güncelleştirir.

Gününüzü data-attributesbazı sürümlerle güncellemek isterseniz , -

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

- Aksi takdirde, $('body').attr('data-test', 'text');gayet iyi çalışacaktır.

Bunu başarmanın başka bir yolu da -

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

- herhangi bir özellik değişikliğini kısıtlar hangi HTMLElement.prototype.dataset, herhangi bir ek değilHTMLElement.prototype.attributes .

Data özniteliğini ayarlamanın başka bir yolu dataset özelliğini kullanmaktır.

<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

JQuery ve DOM'u senkronize tutmak için basit bir seçenek olabilir

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