属性值在foreach中使用时给出不确定的

Question

我有几个字段，具有自定义属性default。当我单击带有ID reset的按钮时，我想将所有字段的值与afield类更改为默认值。

样本字段是

<input type="text" class="afield" id="field1" default="10" value="10" />
<input type="text" class="afield" id="field2" default="20" value="20" />

以下代码将所有字段的值更改为 undefined，

$(document).on('click', '#reset', function(event){
   event.preventDefault();
   var afields = $('.afield')
   $.each(afields ,function(){ 
         this.value = this['default']; 
   });
});

但是，当我使用 id获取元素并更改其效果很好的值时。代码以下是

$(document).on('click', '#reset', function(event){
   event.preventDefault();
   var afields = $('.afield')
   $.each(afields ,function(){ 
         var ele =  $('#'+this.id)
         var defaultval = ele.attr('default')
         ele.val(defaultval)
   });
});

为什么第一种方法将undefined作为默认值？我有什么办法可以在循环中使用this对象并实现此目标？

Answer 1

事实是，" jquery"中的"此"是html元素，因此要检索自定义属性值，您应该将示例重写为：

$(document).on('click', '#reset', function(event){
   event.preventDefault();
   var afields = $('.afield')
   $.each(afields ,function(){ 
         this.value = this.attributes.default.value; 
   });
});

再次检查文档（HTML DOM元素属性）

或由于您使用jQuery，您可能不会过度复杂化，而只需使用

$(this).val($(this).attr('default'))

Answer 2

尝试以下工作片段。

$(document).on('click', '#reset', function(event){
   event.preventDefault();
   var afields = $('.afield')
   $.each(afields ,function(){ 
         this.value = $(this).attr("default"); 
   });
});

  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="afield" id="field1" default="10"  />
<input type="text" class="afield" id="field2" default="20"  />
<input type="button" id="reset" value ="Reset"/>