更改HTML数据属性值

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

我做错了什么？

来源

2017-01-09 RIKI

'$（本）。数据（ “BLA”，2）;'' – epascarello

ATTR（ 'data'）'！='data。（' – pumpkinzzz

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>

来源

2017-01-09 16:08:52

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?

来源

2017-01-09 16:08:07

如果您检查。数据（ '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>

来源

2017-01-09 16:09:12 DarkLegend

更改HTML数据属性值

回答

相关问题