每当用户将鼠标悬停在表格中时,我都会尝试显示表格中一行的唯一信息。我通过从数据库中提取信息,然后使用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;
}
答案 0 :(得分:0)
由于部分中的<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>