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

作为一般原则，我建议使用绑定(bind)到所有 select 元素的单个事件处理程序，然后使用 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'，以将更改处理程序应用于两个选择元素。为这些元素提供一个公共(public)类会更简洁。

当然，这意味着如果您要更改 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。这意味着您可以将选择移到输入之前，而根本不需要更改 JS。

请注意，我将 .mask() 更改为 .val() 仅用于演示目的，因此当您运行上面的代码片段时，您可以可以轻松地看到它正在工作(我不必弄清楚如何让 .mask() 插件在代码片段中工作)。

另请注意，在当前代码中，您正在测试“Line”中带有大写“L”的值“LandLine”，但在 HTML 中您有 value="Landline" 在“line”中带有小写“l” - 这些需要匹配。