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＆amp; ＃p2info。

有没有办法通过发送$（＆＃34;＃thispart＆＃34;）作为变量来使用one函数？或者我如何重用代码而不是重复代码呢？

我的问题有意义吗？感谢您的帮助。

Answer 1

作为一般原则，我建议使用绑定到所有select元素的单个事件处理程序，然后使用DOM导航从事件发生的特定select元素到其相关输入和div。 / p>

因此，对于您的特定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。这意味着您可以在输入之前将选择移动到输入，而根本不需要更改JS。

请注意，我将.mask()更改为.val()仅用于演示目的，这样当您运行上述代码段时，您可以轻松地看到它正常工作（我无需弄清楚）如何让.mask()插件在代码段中运行。

另请注意，在您当前的代码中，您正在使用“行”中的大写“L”测试值"LandLine"，但在您的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"));
}

这里我添加了一些方法参数来描述答案。同样，您可以使用函数来防止代码重复。这种方式非常易于理解，并提高了可维护性和可重用性。

Jquery - 为多个id使用一个函数来保存重复的代码

3 个答案: