动态JavaScript与rail一起徘徊

Dynamic javascript hovers with rails?

本文关键字：一起 徘徊 rail JavaScript 动态      更新时间：2023-09-26

我有一个包含许多照片的索引视图。我想在每张照片上制作悬停效果，但我的代码只在第一张照片上放置效果，因为它没有 id。

我不确定如何处理。请帮忙吗？

<script>
  $(".product-image").on("mouseover", function(){
    $("#product-overlay").show();
  });
  $(".product-image").on("mouseleave", function(){
    $("#product-overlay").hide();
  });
</script>

这将每次在同一项目上添加效果（显示叠加层），我需要每个项目都有独特的效果。

<li id="product_<%= product.id %>">
        <div class="product-image">
          <%= link_to small_image(product, :itemprop => "image"), url, :itemprop => 'url' %>
          <div id="product-overlay">More</div>
        </div>
      <% end %>
</ul>

问题很简单，你在$("#product-overlay").show()和隐藏中引用了一个 id。

试试这个：

$('.product-image').on('mouseover', function() {
  $(this).find('.product-overlay').show();
});

然后将您的视图更改为以下内容：

<li id="product_<%= product.id %>">
  <div class="product-image">
    <%= link_to small_image(product, :itemprop => "image"), url, :itemprop => 'url' %>
    <div class="product-overlay">More</div>
  </div>
</li>
相关文章：