Question

当用户将鼠标悬停在链接上时，我使用javascript来显示弹出窗口，我有一个链接列表..pop up将包含一些与链接相关的数据。每当我将鼠标悬停在链接弹出窗口时，都会附带数据，但这是列表的最后一条记录。如何获取与链接相关的数据？

任何人都可以帮助我吗？

谢谢。

请找到以下代码

Javascript：

<script type="text/javascript">
        $(function() {
      var moveLeft = 20;
      var moveDown = 10;

      $('#web'+'<%= website.id%>').hover(function(e) {
        $('div.pop-up').show();
      }, function() {
        $('div.pop-up').hide();
      });

      $('#web'+'<%=website.id%>').mousemove(function(e) {
        $("div.pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
      });

    });
    </script>

HTML：

<% for website in @websites %>
<tr>
    <td class="website" id="web_<%= website.id%>"><%= link_to h(truncate(website.name, :length => 30)), website_path(website) %></td>
    <td><%= website_status_image(website) %></td>
</tr>
  <div class="pop-up">
    <h3>Pop-up div Successfully Displayed</h3>
    <p><%= website.name%></p>
  </div>
<% end %>

Answer 1

你的页面上有很多弹出窗口，jQuery不知道你要显示哪一个，并显示最后一个（来自集合）。此外，您不应将任何html标记放在<td>标记之外。

有很多方法可以实现此功能。你应该使用jQuery（.closest()，.parent()方法）找到你的弹出窗口。这是修改后的代码：

<强> HTML

    <tr>
     <td class="website"><%= link_to h(truncate(website.name, :length => 30)), website_path(website) %>
       <div class="pop-up" style='display: none;'>
        <h3>Pop-up div Successfully Displayed</h3>
        <p><%= website.name%></p>
       </div>
     </td>
    <td><%= website_status_image(website) %></td>
</tr>

<强> JS

$('.website').hover(function(e) {
    $('div.pop-up', this).show();
  }, function() {
    $('div.pop-up', this).hide();
  });

如果将您的网站名称放在<tr>标记中的html数据属性中，在您的表旁边创建一个弹出式div，然后在每次用户悬停链接时将此数据放入弹出窗口中会更好。

<强> HTML

<table>
    <% for website in @websites %>
    <tr>
    <td class="website" data-name='<%= website.name%>'><%= link_to h(truncate(website.name, :length => 30)), website_path(website) %></td>
    <td><%= website_status_image(website) %></td>
    </tr>
    <% end %>
</table> 

...

<div class="pop-up" style='display: none;'>
    <h3>Pop-up div Successfully Displayed</h3>
    <p></p>
</div>

<强> JS

$('.website').hover(function(e) {
        var popup = $('div.pop-up').show();
        $('p', popup).html($(this).data('name'));
      }, function() {
        $('div.pop-up').hide();
      });

但我建议您使用jQuery插件或bootsrap popover

javascript弹出数据被覆盖

1 个答案: