.attr（ "data-number"、num_to_string）と.data（ 'number'）を組み合わせて使用​​しているのはなぜですか？

Question

.nextをクリックすると、属性値がdata-number="2"に繰り返し変更されます。最初の試みでは、ブラウザがデータ番号の値を3にすることを意味します。しかし、次回にクリックすると変更されません。それはここに私のコード3. まま：

私は3、4、5としての価値を持つようにしたい

<a class="prev" data-number="1">&#10094;</a> 
    <a class="next" data-number="2">&#10095;</a> 
</div> 
<script> 
    $(document).ready(function(){ 
     $('a.next').on('click', function(){ 
     var image_num = parseInt($(this).data('number')) + 1 ; 
     var num_to_string = image_num.toString(); 
     var prev_value = $(this).attr("data-number", num_to_string); 
      console.log(prev_value); 

     }); 
    }); 
</script> 

....

Answer 1

あなたが持っているので、あなたは、意図data-number -attributeを更新しませんでしたdataを使用して更新することもできます。

$(this).data("number", num_to_string); 

$(document).ready(function() { 
 
    $('a.next').on('click', function() { 
 
    var image_num = parseInt($(this).data('number')) + 1; 
 
    var num_to_string = image_num.toString(); 
 
    var prev_value = $(this).data('number', +num_to_string); 
 
    console.log(num_to_string); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="prev" data-number="1">&#10094;</a> 
 
    <a class="next" data-number="2">&#10095;</a> 
 
</div>

この挙動の理由は、jQueryのデータ属性（data-number）を扱うということです異なっより：この行で

$(this).attr("data-number", num_to_string) 

：だから私はこの行を置き換えます通常の属性はidのようになります。なぜなら、データ属性を扱うとき、DOM要素は実際には変更されないからですこれは通常の属性とは異なり、linkとなります。

なぜ両方の方法dataとattr仕事異なるだと彼らは質問に使用されているようattrが更新DOM-値で動作しますが、dataないのでので、組み合わせて使用​​することはできません。

これが役に立ちます。

Answer 2

あなたがdata()を使用する場合はjQueryが自動的に数値データをキャストしますが、数

$('a.next').on('click', function() { 
 
    var $el = $(this); 
 
    // increment the data object value of number property 
 
    $el.data().number ++; 
 

 
    console.log('New number:', $el.data('number')) 
 
    }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" class="next" data-number="2">Next</a>