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，＃attribute，＃rules，＃events是表单ID。

如何针对代码重复进行优化？

Answer 1

您可以使用reset课程识别所有.reset点击，然后选择此按钮的closest from并应用reset trigger。

请查找下面提到的代码。这对你有帮助。

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

检查下面的工作示例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果不起作用，请告诉我。

Answer 2

您可以像这样合并：

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

优化不同形式jquery的重置表单字段

2 个答案: