Question

我按下按钮创建新的输入条，我希望这些输入条具有唯一的ID，例如 - textBar1，textBar2，textBar3等。

我尝试在函数外部创建一个值为0的变量，然后在函数内部为每次函数运行添加+1值，但这不起作用，而是将id textBar0分配给创建的每个元素。

有没有人对如何解决这个问题有任何建议？

提前致谢！

HTML

<label for='ingredient'></label>
<input id="textBar" class="textBar" type="name" name="ingredient">

<div id="textBarPosition"></div>
<div id="addRemoveContainer">

<input id="addBar" type="button" value="Add Ingredient">

的JavaScript / jQuery的

   var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter +1);
  input.type = 'text';
  input.name = 'name[]';
  return input;
counter = 1;

}


var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

Answer 1

这是因为您没有将更改后的值分配给counter。请改为使用counter+=1或仅使用counter++

input.setAttribute("id", 'textBar' + counter++); // now it should work

您以前做过的事情总是将1添加到0

Answer 2

最好的方法是使用_.uniqueId。

为需要的客户端模型或DOM元素生成全局唯一的ID。如果传递了prefix，则id将附加到它。

_.uniqueId('contact_');
=> 'contact_104'

Answer 3

jQuery代码 -

  var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter);
  input.type = 'text';
  input.name = 'name[]';
  return input;


}

var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    counter++;
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

使用JSFiddle - http://jsfiddle.net/Ashish_developer/mtafre04/

Answer 4

您可以像这样使用Math.random：

input.setAttribute("id", 'textBar_' + Math.random().toString(36));

据我所知，当你第一次调用Math.random时，它会生成一系列0到1之间的唯一随机数，使用当前时间（以毫秒为单位）作为种子，然后返回第一个。后续调用将遍历生成的数字序列，一次返回一个，使您能够为元素ID生成随机唯一字符串。

有没有办法为createElement对象分配唯一的ID？

4 个答案: