当鼠标悬停在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>块从部分块中移出，移动到主模板中。然后，将要在工具提示中显示的内容添加到<tr>元素内的隐藏<div>。举个例子：

<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 代码，以便在鼠标悬停特定<tr>时动态显示.popup<div>中的正确内容：

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