0

我有一个产品页面，列出了某个组的每个产品，而不是当您单击主图像时转到每个产品的产品展示页面，我想将图像加载到 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>

灯箱代码以粗体显示。我正在使用主图像 div 中使用的相同“产品”变量将选定的单个产品拉入灯箱，但是当我在这里使用它时，它似乎拉入了多个产品并将它们层叠在一个之上其他。它甚至没有拉出正确的产品对象。您单击“The Temptress”，它会拉出“The Tim”，这是网格右下角的产品。知道为什么要这样做，因为我使用的是相同的“产品”

<% products.each do |product| %>

谢谢你的帮助！

PS这是咖啡脚本：

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")
  $(".overlay-container").fadeIn ->
    window.setTimeout (->
      $(".product-container." + type).addClass "product-container-visible"
    ), 100


$(".close").click ->
  $(".overlay-container").fadeOut().end().find(".product-container").removeClass "product-container-visible"
4

1 回答 1

1

You can add a product id to the using an id (or data attribute if you prefer). So you can do something like:

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

Then, in your coffeescript, you can do something like:

$(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
于 2013-03-19T19:31:40.407 回答