Rails动态数据悬停在

Question

我正在尝试为动态创建的循环内的项目创建一个悬停动作。 我不知道对象名称是什么或有多少。 到目前为止，我已经正确打印了列表，并且将鼠标悬停在工作上，但是无论您将鼠标悬停在哪个项目上，悬停都只会打印第一项的信息。

<% @reward_definitions_with_user_points.each do |definition| %>
        <li>
          <a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
          <%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
          </a>
          <div id="point-tracker-popover" style="display:none">
            <div class="popover-title"><%=definition.first.name%></div>
            <div class="popover-content">
              <div class="popover-inner popover-lg">
                <%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
              </div>
            </div>
          </div>
        </li>
    <% end %>

例如：如果我的列表是a，b，c，d，e，f，并且我希望将鼠标悬停在激活时按顺序显示每个字母。 但是，无论鼠标激活哪个鼠标，它将在悬停中显示“ a”。

Answer 1

您可能应该提到，弹出式窗口是您遇到的问题。 同时显示循环生成的html很有帮助。 您似乎从标记中暗示弹出窗口是html5，但我认为它们是twitter-bootstrap的一部分？

说了这么多...

您所描述的内容显然与data-target="#point-tracker-popover" 。 我相信它指向id="point-tracker-popover" 。 具有此ID的div是在循环内部生成的（具有多个具有相同ID的元素是不好的，这就是您遇到上述行为的原因）。

将循环更改为使用each_with_index应该可以解决您的问题。

<% @reward_definitions_with_user_points.each_with_index do |definition, index| %>
        <li>
          <a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
          <%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
          </a>
          <div id="point-tracker-popover-<%= index %>" style="display:none">
            <div class="popover-title"><%=definition.first.name%></div>
            <div class="popover-content">
              <div class="popover-inner popover-lg">
                <%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
              </div>
            </div>
          </div>
        </li>
    <% end %>

当然，您可以简单地将目标更改为data-target=".point-tracker-popover" ，并将id="point-tracker-popover"更改为class="point-tracker-popover" ; 这将是一种更清洁的方法。 不过，我确实对弹出式窗口并不熟悉，所以我不能说这是否是您唯一的问题，或者第二种方法是否可行。