我试图在用户将鼠标悬停在表格中的某行上时显示该行的唯一信息。我正在通过从数据库中提取信息然后使用 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;
}
最佳答案
既然你有你的 <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>
关于javascript - Ruby on Rails App 鼠标悬停时显示行相关信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45087212/