Veri özniteliği değeri güncellenemiyor

Bununla ilgili internette bazı örnekler olsa da doğru çalışmıyor gibi görünüyor. Sorunu çözemiyorum.

Bu basit html'ye sahibim

         <div id="foo" data-num="0"></ div>
         <a href="#" id="changeData">change data value</a>

"Veri değerini değiştir" bağlantısını her tıkladığımda data-num'un veri değerini güncellemek istiyorum. Örneğin 1,2,3,4, ... (artı her bağlantıya tıkladığımda 1)

sahip olduğum şey

            var num = $('#foo').data("num");
            console.log(num);
            num = num+1;               
            console.log(num);
            $('#foo').attr('data-num', num);   

Değer, her seferinde 0'dan 1'e bir kez değişir. Artımlı yapamam. Neyi yanlış yaptığıma dair herhangi bir öneriniz var mı?

AŞAĞIDAKİ CEVAP İYİDİR

Veri yöntemini doğru kullanmıyorsunuz . Verileri güncellemek için doğru kod:

$('#foo').data('num', num); 

Yani örneğiniz şöyle olacaktır:

var num = $('#foo').data("num") + 1;       
console.log(num)       
$('#foo').data('num', num); 
console.log(num)

Bunun yerine, veri nesnesinin değil, düğüm öğesinin öznitelik veri-numarasını değiştirmek isterseniz bunu kullanın :

DEMO

$('#changeData').click(function (e) { 
    e.preventDefault();
    var num = +$('#foo').attr("data-num");
    console.log(num);
    num = num + 1;
    console.log(num);
    $('#foo').attr('data-num', num);
});

Not: ancak data () nesnesini hemen hemen her durumda kullanmalısınız, ancak hepsinde değil ...

Bu özellikleri mevcut, yerel JavaScript kullanarak almak veya güncellemek istersek, bunu aşağıda gösterilen getAttributeve setAttributeyöntemlerini kullanarak yapabiliriz :

JavaScript

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

JQuery aracılığıyla

// Fetching data
var fruitCount = $(this).data('fruit');

// Above does not work in firefox. So use below to get attribute value.
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).data('fruit','7');

// But when you get the value again, it will return old value. 
// You have to set it as below to update value. Then you will get updated value.
$(this).attr('data-fruit','7'); 

Vanilla js için bu belgeleri veya jquery için bu belgeleri okuyun

Kendim için, Jquery lib 2.1.1'i kullanarak aşağıdakiler beklediğim gibi ÇALIŞMADI:

Öğe veri özelliği değerini ayarlayın:

$('.my-class').data('num', 'myValue');
console.log($('#myElem').data('num'));// as expected = 'myValue'

ANCAK öğenin kendisi öznitelik olmadan kalır:

<div class="my-class"></div>

Daha sonra $ ('. My-class [data-num = "myValue"]') // geçerli uzunluk 0 yapabilmek için DOM'un güncellenmesine ihtiyacım vardı

Bu yüzden yapmak zorundaydım

$('.my-class').attr('data-num', 'myValue');

DOM'un güncellenmesini sağlamak için:

<div class="my-class" data-num="myValue"></div>

Özniteliğin var olup olmadığı $ .attr üzerine yazılacaktır.

Benzer bir sorun vardı ve sonunda ikisini de ayarlamak zorunda kaldım

obj.attr('data-myvar','myval')

ve

obj.data('myvar','myval')

Ve bundan sonra

obj.data('myvar') == obj.attr('data-myvar')

Bu yardımcı olur umarım.

Temel olarak, ihtiyaçlarınıza bağlı olarak veri özniteliği değerini ayarlamanın / güncellemenin iki yolu vardır. Aradaki fark, verilerin kaydedildiği yer,

Eğer kullanırsanız , .data()adı verilen yerel değişkene kaydedilir data_userve eleman incelendiğinde görünmez, kullanırsanız .attr()herkes tarafından görülebilir.

Bu yorum hakkında çok daha net açıklama

Bu cevap, sadece bir veri özniteliğinin değerini değiştirmek isteyenler içindir.

@Adeneo'nun belirttiği gibi önerilen, Jquery data-attr'ınızın değerini doğru şekilde değiştirmeyecektir. Yine de bazı nedenlerden dolayı, onu (veya başkalarını) veri özniteliklerini güncellemek isteyenler için doğru yöntemi gönderdiğini görmüyorum. @Lucas Willems'in gönderdiği cevap Brian Tompsett'in - 汤 莱恩 sorununun cevabı olabilir, ancak diğer kullanıcıları buraya getirebilecek olan sorunun cevabı olmayabilir.

Orijinal sorgulama beyanıyla ilgili hızlı cevap

-Veri özniteliklerini güncellemek için

$('#ElementId').attr('data-attributeTitle',newAttributeValue);

Kolay hatalar * - değerini değiştirmek istediğiniz özelliğinizin başında "veri" olmalıdır.

Benzer bir sorunla karşılaştığımda, IE 10 ve altı sürümlerde desteklenmese de bu çözümü öneriyorum.

Verilen

<div id='example' data-example-update='1'></div>

Javascript standardı, veri-örnek-güncellemeyi güncellemek için veri kümesi adı verilen bir özelliği tanımlar.

document.getElementById('example').dataset.exampleUpdate = 2;

Not: Doğru veri özelliğine erişmek için deve harf durumu gösterimini kullanın.

Kaynak: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Jquery kullanırken html veri etiketinin güncellenmemesiyle ilgili aynı sorunu yaşadım, ancak asıl işi yapan kodu jquery'den javascript'e değiştirmek işe yaradı.

Düğme tıklandığında bunu kullanmayı deneyin: (Ana kodun Javascripts setAttribute () işlevi olduğuna dikkat edin .)

function increment(q) {

    //increment current num by adding with 1
    q = q+1;

    //change data attribute using JS setAttribute function
    div.setAttribute('data-num',q);

    //refresh data-num value (get data-num value again using JS getAttribute function)
    num = parseInt(div.getAttribute('data-num'));

    //show values
    console.log("(After Increment) Current Num: "+num);

}

//get variables, set as global vars
var div = document.getElementById('foo');
var num = parseInt(div.getAttribute('data-num'));

//increment values using click
$("#changeData").on('click',function(){

    //pass current data-num as parameter
    increment(num);

});