Question

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

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 =＆＃34; textEdit＆＃34;可编辑的。

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

Answer 1

不要使用重复的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
  };
}

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

1 个答案: