优化复位形式不同形式的领域的jQuery

Question

我与他们每个人的和复位按钮，单击窗体选项卡，它重置只是形式的表单字段。

//Reset respective forms 
    $('#thresholds .reset').on('click', function() { 
     $('#thresholds').trigger("reset"); 
    }); 
    $('#attributes .reset').on('click', function() { 
     $('#attributes').trigger("reset"); 
    }); 
    $('#rules .reset').on('click', function() { 
     $('#rules').trigger("reset"); 
    }); 
    $('#events .reset').on('click', function() { 
     $('#events').trigger("reset"); 
    }); 

#thresholds，#attributes，#rules，#events是表单ID。

我如何优化此代码重复？

Answer 1

您可以像这样把它们合并：

$('#thresholds .reset, #attributes .reset, #rules .reset, #events .reset').on('click', function() { 
    $(this).parents('form:first').trigger("reset"); 
}); 

Answer 2

可以识别所有reset点击与.reset类，然后选择这个按钮closest from和应用reset trigger。

请在以下提到的代码。这会帮助你。

$('.reset').on('click',function(e){ 
    e.preventDefault(); 
    $(this).closest('form').trigger('reset'); 
}); 

查看下面的工作示例。

$('.reset').on('click',function(e){ 
 
    e.preventDefault(); 
 
    $(this).closest('form').trigger('reset'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="thresholds"> 
 
    <input type="text" /> 
 
    <input type="button" class='reset' value="Reset" /> 
 
</form> 
 

 
<form id="attributes"> 
 
    <input type="text" /> 
 
    <input type="button" class='reset' value="Reset" /> 
 
</form> 
 

 

 
<form id="rules"> 
 
    <input type="text" /> 
 
    <input type="button" class='reset' value="Reset" /> 
 
</form> 
 

 
<form id="events"> 
 
    <input type="text" /> 
 
    <input type="button" class='reset' value="Reset" /> 
 
</form>

让我知道，如果它不工作。