我有这个 fiddle https://jsfiddle.net/3azcbye3/2/这显示了我遇到的确切情况。
我想知道为什么当我执行 $('[data-prototype]').each
时,我无法使用 $(this).data( 'prototype', value)
但需要利用 $(this).attr('data-prototype', value)
。
当点击事件稍后使用 .data('prototype')
获取原型(prototype)时,就好像它获取了 DOM 值而不是应该在 jQuery 局部变量中更新的值。据我了解,.attr
vs .data
我本以为两者是相反的。
编辑:在 fiddle 中实现事件片段的简化版本后,它似乎按预期工作。我的其他库中一定有什么东西导致了冲突。
最佳答案
两个代码返回相同的结果
这个:
$('[data-prototype]').each(function(i, element) {
var prototype = $($(element).data('prototype'));
prototype.find('label').each(function(l, label) {
$(label).text('****'); //removed code for clarity
});
$(this).data('prototype', prototype[0].outerHTML);
console.log( $(this).data('prototype'))
});
产量:
<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
</div></div></div></div>
还有这段代码:
$('[data-prototype]').each(function(i, element) {
var prototype = $($(element).data('prototype'));
prototype.find('label').each(function(l, label) {
$(label).text('****');
});
$(this).attr('data-prototype', prototype[0].outerHTML);
console.log( $(this).attr('data-prototype'))
});
产量:
<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
</div></div></div></div>
将结果超越比较,两者是相同的:
关于javascript - 为什么我不能更新我在 jQuery 中迭代的数据属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30475210/