问题描述
限时送ChatGPT账号..$(document).ready( function () {$("#bla").on("点击", function () {警报( $(this).data('bla') );$(this).attr('data-bla', "2");});});<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="bla" data-bla="1">按钮因此，我需要将 data-bla 值从1"更改为2"，但正如您所看到的，值未更新并且每次单击按钮时都会提醒默认值1".
我做错了什么?
解决方案data() is not data-* 的访问器函数属性.它是元素的 jQuery 数据缓存的访问器，该元素仅从 data-* 属性初始化.
如果你想读取data-bla属性的值，使用attr("data-bla")，而不是data("bla").如果要设置bla数据项，使用data("bla", newValue)，而不是attr("data-bla", newValue).
例如，获取和设置都使用attr()，或获取和设置都使用data()，但不要'不要混合使用它们，因为它们管理不同的事物.
使用attr():
$(document).ready( function () {$("#bla").on("点击", function () {alert( $(this).attr('data-bla') );$(this).attr('data-bla', "2");});});<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="bla" data-bla="1">按钮使用data():
$(document).ready( function () {$("#bla").on("点击", function () {警报( $(this).data('bla') );$(this).data('bla', "2");});});<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="bla" data-bla="1">按钮$(document).ready( function () {
$("#bla").on( "click", function () {
alert( $(this).data('bla') );
$(this).attr('data-bla', "2");
});
});
<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
button
</div>
So, I need change data-bla value from "1" to "2", but as you can see, value not updated and every click on button, alerts default value "1".
What did I do wrong?
解决方案data() is not an accessor function for data-* attributes. It's an accessor for jQuery's data cache for the element, which is only initialized from data-* attributes.
If you want to read the data-bla attribute's value, use attr("data-bla"), not data("bla"). If you want to set the bla data item, use data("bla", newValue), not attr("data-bla", newValue).
E.g., use attr() for both get and set, or use data() for both get and set, but don't mix them, because they manage different things.
Using attr():
$(document).ready( function () {
$("#bla").on( "click", function () {
alert( $(this).attr('data-bla') );
$(this).attr('data-bla', "2");
});
});
<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
button
</div>
Using data():
$(document).ready( function () {
$("#bla").on( "click", function () {
alert( $(this).data('bla') );
$(this).data('bla', "2");
});
});
<script src="https://ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
button
</div>
这篇关于更改 html 数据属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论