Question

所以在我的索引视图中我有这个（缩写为显示重要部分）

<% @tutor.map do |tutor| %>
  <%= image_tag(asset_url('question-mark.png'), class: 'hoverIcon', size:'16x16') %>
  <div id='hoverRating' style='display: none;'>
    <p>
      The Rating is ... 
    </p>
  </div>
<% end %>

这是脚本

$('.hoverIcon').hover(
  function () {
    $('#hoverRating').show();
  },
  function () {
    $('#hoverRating').hide();
  }
);

所以我遇到的问题是，在图像的第一个实例中，hover函数完全正常，但是当我进入图像的第二个实例并且hover覆盖它时， #hoverRating会出现在图像的第一个实例上。

如何使图片的每个实例显示的#hoverRating覆盖在正在盘旋的特定图像上？

Answer 1

HTML中的标识符必须是唯一的。，您可以指定一个公共类，即hoverRating，然后.find() / .children()来定位元素。

代码的

<% @tutor.map do |tutor| %>
  <%= image_tag(asset_url('question-mark.png'), class: 'hoverIcon', size:'16x16') %>
  <div class='hoverRating' style='display: none;'>
    <p>
      The Rating is ... 
    </p>
  </div>
<% end %>

脚本

$('.hoverIcon').hover(
  function () {
    $(this).find('.hoverRating').show();
  },
  function () {
    $(this).find('.hoverRating').hide();
  }
);

jQuery悬停：不适用于“.map”的每个实例

1 个答案: