Javascript ruby对象上的Coffeescript嵌套迭代

我有一个产品页面，上面有几个产品。当你点击一个产品时，一个灯箱会弹出该产品和相关产品的列表。当您将鼠标悬停在相关产品的列表上时，其图像的不透明度应该会改变。我用这个脚本为第一个产品做了如下工作：

 $(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，但对页面上的其他产品同样不起作用。

为什么不为相关项目分配一个类，并在jquery选择器中使用该类，直接设置mousenter/mouseleave回调？你应该删掉所有中间的内容。如果当你将鼠标悬停在一个图像上时，它们都属于同一个类，那么列表中的每个图像都会改变不透明度。我认为你可以避免这种情况，因为事件处理程序上下文中的“this”是单独的元素。