JavaScript-For循环按钮onclick-识别哪个按钮

我在for循环中创建了5个分区，每个分区有一个图像和一个按钮。 Button的操作是执行like/vote。但是，图像和按钮处于for循环中，我不知道哪个按钮与哪个图像id链接。这样我就可以将它放入数据库中，该图像已被投票

<%
for(until resultSet has next){
    %>
        <img id="img" src="resultsetValue" />
        <button id="btn" >VOTE</button>
    <%
}
%>

现在，如果你看到了，我也给了他们身份证。每个元素的id必须是唯一的，但我在for循环中提供了id，这使得每个图像和每个按钮都具有相同的id。我如何解决这个问题，或者它是否可以

---

我不想使用jQuery，我还必须学习它。

首先，确保按钮没有重复的ID。在这种情况下，最好使用类：

<% for(until resultSet has next) { %>
    <img id="img<%= index %>" src="resultsetValue" />
    <button class="btn" data-index="<%= index %>">VOTE</button>
<% } %>

投票

然后，您可以使用迭代索引来引用当前单击的元素，执行如下操作：

var buttons = document.querySelectorAll('.btn');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        var index = this.getAttribute('data-index');
        var img = document.querySelector('#img' + index);
    };
}

var buttons=document.querySelectorAll（'.btn'）；
对于（变量i=0；i

---

这个可以用

Typo

document

，而不是

documnet

谢谢，我已经更正了。那么，getElementById（）在这里没用了？我会有任何关于onclick的关闭问题吗？

var buttons = document.querySelectorAll('.btn');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        var index = this.getAttribute('data-index');
        var img = document.querySelector('#img' + index);
    };
}