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

Question

我在 for 循环中创建了 5 个分区，每个分区有一个图像和一个按钮。按钮的 Action 是执行点赞/投票。但是，图像和按钮处于 for 循环中，我不知道哪个按钮与哪个图像 ID 相关联。这样我就可以将已投票的图像放入数据库中。

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

在 JavaScript 文件中:

document.getElementById("btn").onclick = function(){
    //WHICH IMAGE NEEDS VOTE NOW
}  

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

我不想用jQuery，我还得学。

Answer 1

首先，确保按钮没有重复的 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);
    };
}

这个可以用