Ruby on rails 试图将单个产品拉入lightbox，但rails拉入了多个/不正确的产品

我有一个产品页面，列出了某个组的每个产品，当您单击主图像时，我不想进入每个产品的产品展示页面，而是想将图像加载到css3灯箱中

我的_product.html.erb代码如下：

<% if products.any? %>
<ul id="products" class="inline product-listing" data-hook>
  <% 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" type="button" value="Zoom In Modal Window" class="popup_button" data-type="zoomin" data-productid="<%= product.id %>">
      <%= large_image(product, :itemprop => "image", :class => "product-image", :class => "popup_button") %>
    </div><!-- main-image-->
    **<div class="overlay-container">
    <div class="product-container zoomin">
        <span class="close">X</span>
        <%= product %>
        <%= large_image(product, :itemprop => "image", :class => "product-image") %>
    </div><!-- window-container zoomin -->
    </div><!-- overlay-container -->**
    <div class="prod_info_box">
    <%= link_to truncate(product.name, :length => 50), product, :class => 'info', :itemprop => "name", :title => product.name %>
    <span class="price selling" itemprop="price"><%= product.price_in(current_currency).display_price %></span>

---

您可以使用id（或数据属性，如果愿意）将产品id添加到。因此，您可以执行以下操作：

<div id="<%= product.id %>" class="product-container zoomin">

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")

  product_id = $(this).attr("data-productid")

  $(".overlay-container").fadeIn ->

    window.setTimeout (->
      $("#" + product_id + ".product-container." + type).addClass "product-container-visible"
   ), 100

---

看起来，对于每个产品，您都在创建一个新的lightbox，然后在您的coffeescript中，使它们都可见，因为它们都有class.product容器。“我错过了什么吗？”勒比策尔谢谢你，我相信你是对的。你知道如何让coffeescript在单个产品上点击功能吗？非常感谢。不幸的是，它仍然不起作用。我尝试了你所做的，然后我尝试了这个：

$（document）.ready->$（“.popup\u按钮”）.click->type=$（this.attr（“数据类型”）product\u id=$（“.product container”）.attr（“数据产品id”）$（.overlay container”）.fadeIn->window.setTimeout（->$（product\u id+type）.addClass“产品容器可见”），100

以及此html:

如果有帮助，这里有一个链接。我意识到我的代码（在product_id+“.product container.”中）缺少了一个+，我只是编辑了我的代码以包含它。这有用吗？使用我的代码时会发生什么？

<div id="<%= product.id %>" class="product-container zoomin">

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")

  product_id = $(this).attr("data-productid")

  $(".overlay-container").fadeIn ->

    window.setTimeout (->
      $("#" + product_id + ".product-container." + type).addClass "product-container-visible"
   ), 100