優化復位形式不同形式的領域的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>

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