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

Question

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

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

$(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 -->

谢谢你的帮助。我很感激。

Answer 1

试试这个

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

您需要在 .main-image 选择器上调用 each，因此每个内部的代码都会执行到您的每个 div.main-image。注意 each 中的 $(this) ，这将在每个循环的每次迭代期间与您的每个 div 相关。

我觉得你可以像这样重构（首先尝试上面的解决方案以确认它正在工作）

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