如何将 jQuery 事件绑定到多个 html ID 以获取其中包含的唯一项目？答案

【问题标题】：How do I bind a jQuery event to several html IDs in order to grab unique items held within?如何将 jQuery 事件绑定到多个 html ID 以获取其中包含的唯一项目？
【发布时间】：2014-08-29 23:00:55
【问题描述】：

我正在制作一个hackernews 克隆，目前正在尝试实现支持线程和cmets 的功能。我通过在我正在使用的箭头 .png 文件的单击事件上附加一个 ajax 请求来执行此操作，以增加我数据库中的线程 upvote 列。

这显示了我正在迭代每个提交的索引页面。

         <% @submissions.each do |submission| %><br>
<div id="upvote" class="submission_upvote/<%= submission.id %>">
    <img src="up.png" />
</div>

<div class="submission">
    <a href="/submissions/<%= submission.id %>">
        <%= submission.id %>. <%= submission.title %> (<a href="<%= submission.url %>"><%= submission.url %></a>)
    </a>
    <p>
        <span id="author_comments_row">by <%= submission.user.name %> <%= submission.created_at %></span>
    </p>
</div>

<%end%>

我的 jquery 现在看起来像这样：

  $('#upvote img').on('click', function(e){
var num = $('#upvote').attr('class');
var new_num = num.match(/[0-9]/);

但是，它只是识别#upvote img 的第一个实例。我的问题是：如何将 ajax 请求绑定到每个和每个“#upvote img”标签，以便我可以检索提交 ID？

【问题讨论】：

元素的id必须是唯一的，所以你需要使用upvote作为一个类而不是一个id来分组所有相似的元素......然后使用$('upvote img').
我删除了ID并打电话给班级无济于事。它仍然返回第一次提交的 id。我认为这与我使用 .attr(); 的事实有关。有没有更好的使用方法？
是的，有...等一下，我会做一个快速的 jsfiddle。
尝试使用像$(document).on('click', '.upvote img', function(){...})这样的事件委托

标签： jquery ruby sinatra

【解决方案1】：

ID 在一个页面中是唯一的，因此拥有多个#upvote 元素不会飞。相反，让它成为一个类，如下所示：

<div class="upvote submission_upvote/<%= submission.id %>">

并将你的 JS 更改为：

$('.upvote img').on('click', function(e) { ...

编辑：

您还可以通过使用数据属性来简化对提交 ID 的检索：

<% @submissions.each do |submission| %><br>
  <div class="upvote" data-submission-id="<%= submission.id %>">
    <img src="up.png" />
  </div>

  <div class="submission">
    ...
  </div>
<%end%>

所以在你的 JS 中，你可以：

$('.upvote').on('click', function() {
  console.log("submission id: " + $(this).data('submission-id'));
});

玩弄这个小提琴：http://jsfiddle.net/LG3H4/

【讨论】：

刚刚尝试过，它仍然只返回给我第一个提交 ID。例如当我单击第 10 个赞成箭头时，我的控制台仍将该提交 ID 记录为 1。编辑：先取出 attr
查看我的编辑...以不需要在另一端解析的方式存储您需要的数据。