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，我希望将鼠标悬停在激活时依次显示每个字母。但它会显示＆＃39; a＆＃39;无论鼠标激活哪一个，都在悬停中。

Answer 1

你应该提到你遇到的问题是弹出窗口问题。同时显示循环生成的html会很有帮助。你似乎从标签中暗示popovers是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";这将是一个更清洁的方法。我真的不熟悉弹出窗口，所以我不能说这是你遇到的唯一问题，或者第二种方法是否有效。

rails动态数据悬停在上面

1 个答案: