変更HTMLデータは、だから、値に

Question

$(document).ready(function() { 
 

 
    $("#bla").on("click", function() { 
 
    
 
     alert($(this).data('bla')); 
 
    \t  $(this).attr('data-bla', "2"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="bla" data-bla="1"> 
 
    button 
 
</div>

属性、私は「2」から「1」data-bla値を変更する必要がありますが、あなたが見ることができるように、値を更新しないと、すべてのボタンをクリックし、アラートのデフォルト値「1」。

どうしたのですか？

Answer 1

data()はdata-*属性のないアクセサ関数です。これは要素のjQueryのデータキャッシュのアクセッサです。はからdata-*の属性に初期化されています。

data-bla属性の値を読み取る場合は、data("bla")ではなく、attr("data-bla")を使用してください。 blaのデータ項目を設定する場合は、で、attr("data-bla", newValue)ではなく、data("bla", newValue)を使用してください。

例えば、用attr()を使用し、両方のためのまたは使用data()、取得と設定の両方の取得と設定が、彼らは別のものを管理しているため、それらを混在させないでください。 data()使用

$(document).ready(function() { 
 

 
    $("#bla").on("click", function() { 
 
    
 
     alert($(this).attr('data-bla')); 
 
    \t  $(this).attr('data-bla', "2"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="bla" data-bla="1"> 
 
    button 
 
</div>

：

$(document).ready(function() { 
 

 
    $("#bla").on("click", function() { 
 
    
 
     alert($(this).data('bla')); 
 
    \t  $(this).data('bla', "2"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="bla" data-bla="1"> 
 
    button 
 
</div>

Answer 2

attr()メソッドは、要素で表示される属性を更新するだけです。データを正しい方法で格納するには、第2引数を値として持つdata()メソッドを使用する必要があります。

$(document).ready(function() { 
 
    $("#bla").on("click", function() { 
 
    alert($(this).data('bla')); 
 
    $(this).data('bla', "2"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="bla" data-bla="1"> 
 
    button 
 
</div>

参照してください：jQuery Data vs Attr?

Answer 3

あなたがチェックしている場合attr()を使用して

.dataの（ 'BLA'）は、あなたもその1つの;-)

$(document).ready(function() { 
 

 
    $("#bla").on("click", function() { 
 
    
 
     alert($(this).data('bla')); 
 
    \t  $(this).data('bla', "2"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="bla" data-bla="1"> 
 
    button 
 
</div>