Question

刚开始使用Javascript所以查询/问题，我有一个动态字段脚本（不是我的），只需按一下按钮即可添加/减去。工作得很好，干得好。

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" name="mytext[]"></div>
</div>

Fiddle

但是，如果我需要在同一表单中添加2或3或4或5个动态字段，该怎么办？我是否需要每次为每个我需要动态的字段重复相同的javascript（up top），或者是否有更好的方法来保持DRY（不要重复自己）方法的完整性？

方案

说我在表单中有2个字段<input type = "text" name="phonenumber">和<input type = "text" name="faxnumber">。我需要它们都是动态的。用户可能有3个电话号码和2个传真号码。因此将使用3个电话字段和2个传真字段。要使两个不同的字段（或者说3或4个字段）是动态的，我是否需要为每个字段重复javascript。

修改

我为任何人编辑过这本书，以便对我一直想做的事情有一个完美的一瞥。这可能不是正确的方式，也可能不是。我不知道如前所述，我对这些东西不熟悉。

的javascript

$(document).ready(function() {
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="phone[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$(document).ready(function() {
    var max_fields_fax      = 5; //maximum input boxes allowed
    var wrapper_fax         = $(".input_fields_fax"); //Fields wrapper
    var add_button_fax      = $(".add_field_fax"); //Add button ID

    var y = 1; //initlal text box count

    $(add_button_fax).click(function(e){ //on add input button click
        e.preventDefault();
        if(y < max_fields_fax){ //max input box allowed
            y++; //text box increment
            $(wrapper_fax).append('<div><input type="text" name="fax[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper_fax).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); y--;
    })
});

在这里，我重复了两次Javascript，只需要调整一些变量和类的名称

HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="phone[]"></div>
</div>
<div class="input_fields_fax">
    <button class="add_field_fax">Add More Fields</button>
    <div><input type="text" name="fax[]"></div>
</div>

新Fiddle。

如果您需要3个电话字段，请按三次按钮，如果需要2个传真字段，请按第二个添加更多字段2次。我们现在有3个电话字段和2个传真字段，形式相同。我的问题是如何更有效地做到这一点。

Answer 1

我创建了一个对象，其中包含有关您添加的字段的一些信息。

请注意我如何将ID添加到按钮作为数据属性

＆＃13;

@android:drawable

＆＃13;

var fields = {
  phone: {
    title: "Phone number",
    maxFields: 2,
    numFields: 0,
    name: "phone[]"
  },
  fax: {
    title: "Fax (really?)",
    maxFields: 3,
    numFields: 0,
    name: "fax[]"
  }
}

$(function() {
  $(".add_button").on("click", function(e) {
    e.preventDefault();
    var whatField = fields[this.id];
    if (whatField.numFields < whatField.maxFields) { //max input box allowed
      whatField.numFields++; //text box increment
      $("#wrapper").append('<div>' + whatField.title + '<input type="text" name="' + whatField.name + '"/><a href="#" data-id="' + this.id + '" class="remove_field">Remove</a></div>'); //add input box
    }
  });

  $("#wrapper").on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    fields[$(this).data("id")].numFields--;
  })
});

＆＃13;

动态字段javascript中的DRY

1 个答案: