Question

在我的rails应用程序中，我从@results变量加载一个表，使每个表行都是@result。对于每个@result表行，我希望有与@result关联的按钮。我试图为每个按钮使用javascript eventlistener，然后在js.erb文件中监听事件

运行应用程序时，看起来只有按钮的第一行有事件监听器，我该如何解决？

另外，我怎样才能将@result传递给我的javascript，以便我可以利用该对象的一部分？

我试图通过javascript尝试这样做，因为我想将某些内容复制到剪贴板并将文件保存到计算机上

js.erb

var copyTextareaBtn = document.querySelector('.button1');

copyTextareaBtn.addEventListener('click', function(event) {

# work with the @result that was clicked over here
});

html.erb

<% @results.each { |result|  %>
    <tr>
      <td><%= result[:id] %></td>
      <td> 
        <button class="button1"> B1 </button> 
        <button class="button2"> B2 </button> 
        <button class="button3"> B3 </button> 
      </td>
    </tr>

    <% } %>

Answer 1

您确实可以为每个元素添加一个事件侦听器。问题是document.querySelector将返回第一个匹配的第一个元素。要获得所有这些内容，您可以使用document.querySelectorAll。我们可以将您的JavaScript重写为：

var btns = document.querySelectorAll('.button1');

Array.prototype.forEach.call(btns, function addClickListener(btn) {
  btn.addEventListener('click', function(event) {
    // code here to handle click
  });
});

请注意querySelectorAll返回一个NodeList，就像一个数组，但遗憾的是不是一个数组。因此它没有在forEach类中找到Array和类似方法。因此，上面的工作是使用forEach中的Array.prototype迭代节点。

但是，更好的方法是在窗体的父元素或容器上或在文档级别监听事件。事件冒出来，这样您就可以收听点击事件一次并过滤到您想要响应的类型。那将是一个事件监听器而不是N（其中N是按钮的数量）。

Answer 2

问题是你增加className button1的数量，例如button2，button1并在javascript中调用button1，以便调用所有button1您需要为HTML中的每个按钮提供课程var button1 = document.getElementsByClassName("button1"); Object.keys(button1).map( function (key) { var button = button1[key] button.addEventListener("click", function(){ alert("button1") }); });。

编辑：请尝试下面的代码。

{{1}}

如何为表格行结果的每个按钮添加事件监听器？

2 个答案: