Question

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

感谢您的帮助！

P.S。这是coffeescript：

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

Answer 1

您可以使用ID（或数据属性，如果您愿意）添加产品ID。所以你可以这样做：

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

然后，在你的coffeescript中，你可以做类似的事情：

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

试图将单个产品拉入灯箱，但铁轨拉动多个/不正确的产品

1 个答案: