javascript - 优化不同表单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').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>

如果不起作用请告诉我。