Jquery - 爲多個ID使用一個函數來保存重複的代碼

Question

我不擅長創建高效的代碼，所以希望有人能提供一些建議。

這是我的問題的一個非常基本的例子。 我有兩個文本框和兩個選擇框形式：

<input type="text" name="phone1" id="phone1" /> 
<select id="p1_format"> 
    <option value="Landline">Land Line Number</option> 
    <option value="Mobile">Mobile</option> 
</select> 
<div id="p1info"></div> 

<input type="text" name="phone2" id="phone2" /> 
<select id="p2_format"> 
    <option value="Landline">Land Line Number</option> 
    <option value="Mobile">Mobile</option> 
</select> 
<div id="p2info"> 

我使用一個jQuery插件口罩適用於輸入框。 用戶從選擇框中選擇數字類型以確保正確的掩碼。 Onchange然後應用掩碼並將基本描述寫入div html。

$(document).ready(function() { 
    $('#p1_format').change(function(){ 

     if($(this).val() =="LandLine"){ 
      $("#phone1").mask("+61 9 9999-9999"); 
      $('#p1info').html("Format: +61 8 XXXX-XXXX"); 
     } 


     if($(this).val() =="Mobile"){    
     $("#phone1").mask("9999 999-999"); 
     $('#p1info').html("Format: XXXX XXX-XXX"); 
     } 

    }); 
}); 

這一切運作良好，但我不得不重複上面的jQuery函數來處理PHONE2和更改所有的ID值＃p2_format，＃PHONE2 &＃p2info。

有沒有辦法通過發送$（「＃thispart」）作爲變量來使用這個函數？或者我可以如何重用代碼而不是重複它？

我的問題有意義嗎？ 感謝您的幫助。

Answer 1

作爲一般原則，我建議使用綁定到所有的單個事件處理函數選擇元素，然後使用DOM導航從事件發生的特定select元素獲取其相關輸入和div。

因此，對於您的特定HTML結構，你可以使用.prev()和.next()方法：

$(document).ready(function() { 
    $('#p1_format, #p2_format').change(function(){ 
     var input = $(this).prev(); 
     var div = $(this).next(); 

     if(this.value =="LandLine"){ 
      input.mask("+61 9 9999-9999"); 
      div.html("Format: +61 8 XXXX-XXXX"); 
     } else if(this.value =="Mobile"){    
      input.mask("9999 999-999"); 
      div.html("Format: XXXX XXX-XXX"); 
     } 
    }); 
}); 

注意，我最初的選擇更改爲'#p1_format, #p2_format'到更改處理適用於這兩種選擇的元素。讓這些元素成爲一個共同的類別會更加美觀。

當然這意味着如果你要改變你的HTML結構，你需要改變你的JS來處理新的結構。但是，儘量減少問題的一個辦法是在包裝容器的div相關的元素和使用類：

$(document).ready(function() { 
 
    $('.phoneFormat').change(function(){ 
 
     var container = $(this).closest(".phone"); 
 
     var input = container.find("input"); 
 
     var info = container.find(".phoneInfo"); 
 

 
     if(this.value =="Landline"){ 
 
      input.val("+61 9 9999-9999"); 
 
      info.html("Format: +61 8 XXXX-XXXX"); 
 
     } else if(this.value =="Mobile"){    
 
      input.val("9999 999-999"); 
 
      info.html("Format: XXXX XXX-XXX"); 
 
     } 
 
    }).trigger("change"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="phone"> 
 
    <input type="text" name="phone1" /> 
 
    <select class="phoneFormat"> 
 
    <option value="Landline">Land Line Number</option> 
 
    <option value="Mobile">Mobile</option> 
 
    </select> 
 
    <div class="phoneInfo"></div> 
 
</div> 
 
<div class="phone"> 
 
    <input type="text" name="phone2" /> 
 
    <select class="phoneFormat"> 
 
    <option value="Landline">Land Line Number</option> 
 
    <option value="Mobile">Mobile</option> 
 
    </select> 
 
    <div class="phoneInfo"></div> 
 
</div>

在JS，我已經使用了.closest()從改變以獲得最多選擇然後使用.find()方法選擇該容器內的輸入和信息div。這意味着你可以將select移到輸入前面，而不需要改變JS。

注意，我改變.mask()到.val()爲演示目的只有這樣，當你運行上面的代碼中，你可以很容易地看到它的工作（沒有我不必弄清楚如何讓.mask()插件的代碼片段工作） 。

請注意，在您當前的代碼中，您正在測試值「"LandLine"」，在「行」中使用大寫「L」，但在HTML中，您的value="Landline"使用小寫「l」 。

Answer 2

您可以使用屬性與選擇，.prev()和.next()結束選擇以前<input>元素和未來<div>元素

$(document).ready(function() { 
    $('[id$=_format').change(function(){ 

     if($(this).val() =="LandLine"){ 
      $(this).prev("[id^=phone]").mask("+61 9 9999-9999"); 
      $(this).next("[id$=info]").html("Format: +61 8 XXXX-XXXX"); 
     } 

     if($(this).val() =="Mobile"){    
      $(this).prev("[id^=phone]").mask("9999 999-999"); 
      $(this).next("[id$=info]").html("Format: XXXX XXX-XXX"); 
     } 

    }); 
}); 

Answer 3

您可以將複製代碼添加到單獨的函數中，如下所示。

function format(field, phone, info){ 
    if($(field).val() =="LandLine"){ 
    $(phone).mask("+61 9 9999-9999"); 
    $(info).html("Format: +61 8 XXXX-XXXX"); 
    } 
    if(field.val() =="Mobile"){    
    $(phone).mask("9999 999-999"); 
    $(info).html("Format: XXXX XXX-XXX"); 
    } 
} 


$('#p1_format').change(function(){ 
format($(this), $("#phone1"), $("#p1info")); 
} 

這裏我添加了一些方法參數來描述答案。同樣，您可以使用一個函數來防止代碼重複。 這種方式很容易理解，並且提高了可維護性和可重用性。