有没有办法给createElement对象分配唯一的ID?
我有一个按钮时,按下创建新的输入栏,我希望这些输入栏有独特的ID,例如 - textBar1,textBar2,textBar3等。有没有办法给createElement对象分配唯一的ID?
我试着在函数的外部创建一个具有值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");
});
});
这就是因为...你不reassinging修改值counter
。 使用counter+=1
代替或只是counter++
你以前是干什么总是添加1
到0
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/
这将值'textBar0'分配给第一个动态创建的输入框的id,所以把它放在var选择器下面。第一次单击'添加配料'时,它将采用计数器值0并将id'textBar0'分配给第一个输入框,然后每次单击按钮时将该值递增1(因此第二个输入框的id为'textBar1',第三个 - 'textBar2'等)。如果您将计数器++放置在var选择器上方,它将从'textBar1'(第一个输入框将获得id'textBar1',second -'textBar2',third-'textBar3'等等)开始将值分配给输入框。 – Ashish 2014-10-09 13:20:49
您可以使用Math.random
是这样的:
input.setAttribute("id", 'textBar_' + Math.random().toString(36));
这是我的理解是,当你第一次叫Math.random
它使用当前时间(毫秒)作为种子,然后返回第一个生成唯一的随机数的0和1之间的序列。随后的调用将遍历生成的数字序列,一次返回一个,使您能够为元素ID生成随机唯一的字符串。
最好的方法是使用_.uniqueId。
为客户端模型或需要DOM元素的DOM元素生成一个全局唯一的ID。如果传递了前缀,则该标识将被追加到它。
_.uniqueId('contact_');
=> 'contact_104'
尽管这个链接可能回答这个问题,但最好在这里包含答案的基本部分,并提供参考链接。如果链接页面更改,则仅链接答案可能会失效。 – 2014-12-10 07:03:17
好的,我会添加一个例子。 – Tanmay 2014-12-10 07:22:14
哦,对,这是有道理的。感谢您的帮助! – Macksen 2014-10-09 13:08:01
@麦克森很高兴它帮助;) – 2014-10-09 13:09:49