Question

也许你可以帮我解决这个问题：

我有一个按钮点击广告div的功能。任何div都包含一个复选框和一个文本字段。如果选中该复选框，则文本字段为绿色，否则，文本字段为红色。

我不知道如何为＆＃34;程序＆＃34;分配动态div名称。 div，作为计数器，如id = procedure1，id = procedure2 ...然后访问背景颜色为procedure1.style.backgroundColor ...

谢谢！

var counter = 1;

function addInput(divName) {
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "<input type='checkbox' id='check' onclick='if(this.checked){procedure.style.backgroundColor=`green`;}
          else {procedure.style.backgroundColor=`red`;}'><input type='text' id='procedure'>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
}

Answer 1

根本不应该使用ID。遍历 DOM，而不是找到相应的onclick='this.nextSibling.style.backgroundColor = this.checked ? "green" : "red";'。在您的特定情况下，复选框的next sibling是您要操作的元素：

innerHTML

我还建议您了解other ways of binding event handlers，因为内联事件处理程序have many disadvantages和使用Public Sub New(enabled As Boolean) InitializeComponent() 'Process using enabled arg End Sub这样会使代码更难维护。

Answer 2

如果使用document.createElement而不是字符串制作元素，则可以使用setAttribute。

var dynamicId = 'someId';
element.setAttribute('id', dynamicId);

所以对你的例子

var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'check');
input.addEventListener('click', function() {
  if(this.checked) {
    // ...
  }
});

但是，您可能已经注意到使用这种方法甚至不需要使用ID。您可以使用一些变量简单地保留对您创建的元素的引用。

var procedure1 = document.createElement('input');
var procedure2 = document.createElement('input');

procedure1.addEventListener('click', function() {
  // do something with procedure2
  procedure2.style.backgroundColor = 'red';
});

Answer 3

您可以使用jquery来执行此操作

设置：$('#myObj').attr('id','NEWID');

或$('#myObj').prop('id','NEWID');

获取：$('#myObj').attr('id');

如何动态更改div id

3 个答案: