更改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>

所以，我需要從「1」改變data-bla值設置爲「2」，但正如你所看到的，不更新值，每按一下按鈕，警報默認值「1」。

我做錯了什麼？

Answer 1

data()是不爲data-*屬性的存取功能。它是jQuery數據緩存元素的訪問器，它只有初始化從data-*屬性。

如果要讀取data-bla屬性的值，請使用attr("data-bla")而不是data("bla")。如果要設置bla數據項，請使用data("bla", newValue)而不是attr("data-bla", newValue)。

例如，使用attr()爲get和set，或使用data()對get和set，但不要混合使用它們，因爲它們管理不同的東西。

使用attr()：

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

使用data()：

$(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()方法只是更新元素中可見的屬性。要以正確的方式存儲數據，您需要使用第二個參數作爲值的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

如果您檢查。數據（ 'BLA'），你也應該改變一個;-)

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