Javascript Rails和coffeescript弹出窗口仅用于数组中的第一个对象

我有一个产品页面，列出了几种不同的产品。单击产品主图像时，我希望弹出窗口/灯箱显示该产品的另一个图像和其他信息

但是，单击事件仅适用于第一个产品：

$(document).ready ->
 i = $(".main-image").attr("data-productid")
 button = $("#single_" + i)
 button.on "click", ->
  $("#product_popup").show()

html/erb：

<% products.each do |product| %>
<% if product.on_display? %>
  <div class="grid_1">
  <li id="product_<%= product.id %>" class="columns product three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
    <div class="main-image" id="single_<%= product.id %>" data-productid="<%= product.id %>">
      <%= large_image(product, :itemprop => "image", :class => "product-image", :id => product.id) %>
    </div><!-- main-image-->
    <%# ******LIGHTBOX******* %>
    <div id="product_popup">
        <%= large_image(product, :itemprop => "image", :class => "product-image") %>
    </div><!-- product_popup -->

“image”，：class=>“product image”，：id=>product.id）%>
“图像”，：class=>“产品图像”）%%>

谢谢你的帮助。我很感激。试试这个

jQuery ->
  $(".main-image").each () ->
    i = $(this).attr("data-productid")
    $("#single_" + i).on "click", ->
      $("#product_popup").show()

您需要调用每个.main图像选择器，这样每个选择器中的代码都会对每个div.main-image执行。注意each中的$（this），它将在每个循环的每次迭代期间相对于每个div

我想你可以像这样重构（先试试上面的解决方案，确认它能正常工作）

---

这无疑让我更进一步。现在所有的产品都可以点击并弹出产品弹出窗口div，但是每个产品在点击时都会显示第一个产品图像，而不是被点击产品的图像。有什么想法吗？谢谢你的帮助！是的，如果您在我的答案中使用第一段代码，请将

$（“#product_popup”）.show（）

替换为

$（“li#product_”+i+“#product_popup”）。show（）

尝试了这一方法，它适用于第一个产品，但当我单击其他产品时，什么都没有发生。这是我的咖啡脚本：

jQuery->$（“.main image”）.each（）->i=$（This.attr（“data productid”）$（“#single#i”+i.）。点击->$（“li#product#+i+”#product#u弹出窗口”）.show（）

嘿，jtrinker，别忘了奖励答案，这就是它的工作方式。我一直在等待回复。不过我想出来了。

jQuery ->
  $("div.main-image").on "click", ->
    $("div#product_popup").show()