異なるフォームのリセットフォームフィールドを最適化する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>

それが動作しない場合は、私に教えてください。