优化不同表单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

您可以使用.reset类识别所有reset点击，然后closest from该按钮中选择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> 

让我知道是否有效。

Answer 2

您可以像这样合并它们：

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