如何迭代具有相同ID的元素

How do I iterate over elements with the same ID?

本文关键字：ID 元素 何迭代 迭代      更新时间：2023-09-26

我想以编程方式将相同的事件侦听器分配给具有相同ID的两个按钮。问题是，当我像下面这样复制可编辑内容div（由事件侦听器更新的DOM元素）时，只有第一个按钮起作用，而重复元素上的第二个按钮什么都不起作用。

参见小提琴：http://jsfiddle.net/xo0Lampn/

HTML

<!---Non-duplicate element--->
<div class="mainEdit">
<!---This one is working--->
<a id="editBtn" class="editbtn" href="#">Edit Text</a>
<!---This one is working--->
<div id="textEdit">Editable Content</div>
</div>
<!---Non-duplicate element--->

<!---Duplicate of above--->
<div class="mainEdit">
<!---This one is not working--->
<a id="editBtn" class="editbtn" href="#">Edit Text</a>
<!---This one is not working--->
<div id="textEdit">Editable Content</div>
</div>
<!---Duplicate of above--->

JavaScript

    var edbtn = document.getElementById("editBtn");
    var edtext = document.getElementById("textEdit");
    // I've tried to loop them but this doesn't work.
    // for (var i = 0; i < edbtn.length; i++) {
    edbtn.addEventListener('click', function () {
        if (edtext.contentEditable == "true") {
            edtext.contentEditable = "false";
            var v = edtext.clientWidth + 10;
            edtext.style.width = v + "px";
            edtext.style.textDecoration = "none";
            edbtn.innerHTML = "Edit Text";
        } else {
            edtext.contentEditable = "true";
            edtext.style.width = "auto";
            edtext.style.textDecoration = "underline";
            edbtn.innerHTML = "Done";
        }
    });
    // }

我希望这两个按钮都能像第一个一样发挥作用，当我点击每个按钮时，它应该会使id="textEdit"的元素可编辑。

我可能做错了，但我希望你们能给出一个解决方案。

不要使用重复的ID。这不是有效的HTML。考虑使用class，在这种情况下，您可以使用document.getElementsByClassName找到元素。

var elements = document.getElementsByClassName('yourClassNameHere');
for (var i = 0, length = elements.length; i < length; i++) {
  elements[i].onclick = function(event) {
    var button = event.currentTarget;
    // Do your contentEditable checks here
  };
}
相关文章：