0

我有一个包含多种产品的产品页面。当您单击产品时，会弹出一个灯箱，其中包含该产品和相关产品的列表。当您将鼠标悬停在相关产品列表上时，其图像的不透明度应该会发生变化。我用这个脚本为第一个产品工作：

 $(document).ready ->
   z = $(".related_products_image")
   z.each ->
     relid = $(this).data("imageid")      
     hover = $("#related_" + relid) 
     hover.mouseenter ->
      $(this).css("opacity", 1.0)
     hover.mouseleave ->
      $(this).css("opacity", 0.4)

但它只适用于第一个产品。我相信因为我在页面上有很多相关产品的列表，而且我没有重复，所以它只是选择第一个。

我的 html/erb 看起来像这样：

<div id="product_popup_<%= product.id %>">
        <div class="related-products">
          <ul class="related_products_list" id="related_products_list_<%= product.id %>" data-listid="<%= product.id %>">
         <% @related_products.each do |related_product| %>
         <li class="related_products_item"><%= link_to large_image(related_product, :itemprop => "image", :data => {:imageid => related_product.id}, :id => "related_" + related_product.id.to_s, :class => "related_products_image"), url_for(related_product) %></li>
         <% end %>
    </ul>

所以我尝试创建一个如下所示的嵌套迭代：

$(document).ready ->
 i = $(".related_products_list")
 i.each ->
  listid = $(this).data('listid')
  list = $("#related_products_list_" + listid + " li" + " img") 
  list.each ->
    z = $(".related_products_image")
    relid = $(this).data("imageid")      
    hover = $("#related_" + relid) 
    hover.mouseenter ->
      $(this).css("opacity", 1.0)
    hover.mouseleave ->
      $(this).css("opacity", 0.4)

**编辑：上面的代码适用于第一个产品 ligutbox，但对于页面上的其余产品也没有任何作用。

4

0 回答 0