0

我有以下 HTML：

<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>

我想做的是，当有人将鼠标悬停在 a上时div.listing，alert()将名称显示在屏幕上id。

意思是，如果一个人用鼠标悬停在id="ref_3", 到alert("ref_3");

问题：如何使用 JQuery/Javascript 执行此操作？

更新：

下面链接是现场直播。如您所见，以下答案均无效。（第 340 行）

http://tinyurl.com/ybbey4

有什么推荐吗？

4

6 回答 6

1 
$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});

您可以在此处查看此代码。

更新

查看您的代码，您可能想试试这个：

$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});
于 2010-01-28T20:03:28.193 回答
0

与您的网站分开似乎可以正常工作...

我建议只在代码中添加一个带有hslisting类的 div。不要使用JS注入它。看看你注射的方式是否有问题。

http://jsbin.com/agosa工作得很好。

于 2010-01-28T21:10:23.360 回答
0

'mouseenter' 事件通常是比'mouseover' 更好的选择。来自 http://api.jquery.com/mouseenter/：

“mouseenter 事件与 mouseover 处理事件冒泡的方式不同。如果在此示例中使用 mouseover，则当鼠标指针移到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。mouseenter 事件，另一方面，只有当鼠标进入它绑定的元素时才会触发它的处理程序，而不是后代。”

jQuery('#panel div.listing').bind('mouseenter',function(){
  alert(this.id);
  return false;
});
于 2010-01-28T21:11:17.380 回答
0

更好

$('#panel div.listing').mouseover(function() {
  alert($(this).attr('id'));
});

这行得通

<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $('#panel div.listing').mouseover(function() {
        alert($(this).attr('id'));
    });
  });
</script></head>
<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>
</body>
</html>
于 2010-01-28T20:06:21.587 回答
0

您当前是否在其他脚本文件中使用 $ 作为函数，而不是使用 noConflict

于 2010-01-28T20:36:02.507 回答
0

BillyJ，听起来您可能没有在 HTML 文件中加载 jQuery 库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>在调用上述函数之前，请务必将其包含在您的文件中。

于 2010-01-28T20:37:57.403 回答