在foreach中使用它时，属性值为undefined

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中的“this”每个都是HTML元素，因此要检索自定义attribute值，您应该将示例重写为：

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

再次查看文档（HTML DOM Element attributes）

或者因为你使用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"/>