JQuery 数据选择器没有使用. data 更新

基本上，如果我将一个 div 加载到一个具有 data-test属性的页面上，并用 jquery 的 .data('test')更改它的值，我就不能再用 $('div[data-test="newValue"]')选择元素

var howMany = $('.t[data-test="test"]').length;
$('.result').html('start there are ' + howMany + ' divs with data "test"<br /><br />');
setTimeout(function() {
$('#one, #three').data('test', 'changed');
}, 500);
setTimeout(function() {
var test = $('.t[data-test="test"]').length,
changed = $('.t[data-test="changed"]').length;
$('.result').append('there are ' + test + ' divs still with data "test"<br /><br />there are ' + changed + ' divs still with data "changed"<br /><br />');
}, 1000);
setTimeout(function() {
$('.t').each(function() {
$('.result').append('div #' + $(this).attr('id') + ' has the test data of: ' + $(this).data('test') + '<br /><br />');
});
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t" id="one" data-test="test">1</div>
<div class="t" id="two" data-test="test">2</div>
<div class="t" id="three" data-test="test">3</div>
<div class="t" id="four" data-test="test">4</div>
<div class="result"></div>

32666 次浏览

小开

That's because i think that .data() use a special cache object inside jQuery to store data (in fact you can evens store object or complex tipes of data), if you check all the attributes are unchanged. If you want to change the attribute, use attr()

小开

最佳答案

jQuery .data() is initially populated with values from the data- attributes, but setting it only stores the associated new value in memory. It doesn't change the attribute in the DOM. To change the attribute, you have to use:

$('#one, #three').attr('data-test', 'changed');

The docs are at http://api.jquery.com/jQuery.data/