Question

每当用户将鼠标悬停在表格中时，我都会尝试显示表格中一行的唯一信息。我通过从数据库中提取信息，然后使用erb将信息放入div中来实现这一点，但我遇到的问题是，所有这些信息都显示为1行的相同信息。 / p>

我正在使用类的行和包含弹出窗口的div的类。我使用jQuery来移动鼠标，并在鼠标悬停在行上时显示和隐藏。

<div class="popup">
    <h4>Blah</h4>
    <% for car in dealership.cars do %>
      <p>
      <%= information about row %>
      </p>
    <% end %>
  </div>


  <tr class="row" data-link="<%= dealership_path(vendor)%>" style="cursor: pointer;">
     <td><%= can_link_to :show, vendor, vendor.id, dealership_path(vendor), {} %></td>
     <td>
     </td>
     <td>Blah</td>
     <td>Blahblah</td>
     <td>Blah</td>
  </tr>


  <script type="text/javascript">
    var noteSpans = document.querySelectorAll('.popup');
    $(document).ready(function() {
      $(".row").hover(function() {
        $(".popup").show();
        window.onmousemove = function (e) {
            var x = (e.clientX + 20) + 'px',
                y = (e.clientY + 20) + 'px';
            for (var i = 0; i < noteSpans.length; i++) {
                noteSpans[i].style.top = y;
                noteSpans[i].style.left = x;
            }
        };
    }, function() {
        $(".popup").hide();
    });
    });

    $("tr[data-link]").click(function() {
      window.location = $(this).data("link")
    })
  </script>

.popup {
  width: 25%;
  text-align: center;
  vertical-align:middle;
  background-color: #13a8ac;
  color: white;
  display: none;
  padding: 8px;
  position: fixed;
 }

Answer 1

由于部分中的<div class="popup">元素会在同一页面上多次呈现，因此您最终会得到多个<div class="popup">个元素。

不仅如此，您还要重复<script>标记，因为页面上有行，这会导致多个事件处理程序附加到.popup和{{1}只有一个就足够了（并且正确）。

<强>解决方案：

将您的tr[data-link] .popup 以及您的<div>块移出主要模板。然后，将您要在工具提示中显示的内容添加到<script>元素中隐藏的<div>。一个例子：

<tr>

然后，在主模板中，更改JavaScript代码，以便在鼠标悬停特定<tr class="row" data-link="<%= dealership_path(vendor)%>"> <div class="row-tooltip" style="display: none"> <h4>Blah</h4> <% for car in dealership.cars do %> <p><%= information about row %></p> <% end %> </div>时动态显示.popup <div>中的正确内容：

<tr>

在Ruby on Rails App

1 个答案: