javascript - Ruby on Rails App 鼠标悬停时显示行相关信息

Question

我试图在用户将鼠标悬停在表格中的某行上时显示该行的唯一信息。我正在通过从数据库中提取信息然后使用 erb 将该信息放入 div 中来完成此任务，但是，我遇到的问题是所有这些信息都显示了 1 行的相同信息。

我为行使用了一个类，为包含弹出窗口的 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和 tr[data-link]只有一个就足够了(而且是正确的)。

解决方案:

移动您的 .popup <div> 以及你的<script> block 出部分，进入主模板。然后，将您希望在工具提示中显示的内容添加到隐藏的 <div> 中。在<tr>里面元素。一个例子:

<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>

然后，在主模板中，更改 JavaScript 代码，使其动态显示 .popup 中的正确内容。 <div>当鼠标悬停在特定的 <tr> 上时:

<script type="text/javascript">
  $(document).ready(function() {
    $(".row").hover(
      function() {
        $(".popup").html(
          $(".row-tooltip", this).html()
        );

        $(".popup").show();

        $(window).on("mousemove.tooltip", function(e) {
          var x = (e.clientX + 20) + 'px',
              y = (e.clientY + 20) + 'px';
          $(".popup").css({
            top: y,
            left: x,
          });
        });
      },
      function() {
        $(".popup").hide();
        $(window).off("mousemove.tooltip");
      }
     );
  });

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