0

我有一个站点有多个具有相同 id 名称的 div。我想为所有有这个 id 的 div 设置一个 mouseleave 函数。在我的$(document).ready函数中，我有这个代码......

$('#my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

我的hideSnippet()功能是正确的，但是这样做只会在 div 出现 id 的第一次设置 mouseleave 功能my_post_container。有没有办法将 mouseleave 函数设置为具有此 ID 的所有 div？

4

4 回答 4

2

具有相同 id 的多个对象是无效的 HTML。因此，你不能使用普通的选择器来找到它们，你应该修复你的 HTML 以不这样做。

#1 建议是修复 HTML，使其没有多个具有相同 ID 的对象。使用类名，然后您可以使用或使用 jQuery 选择器选择它们getElementsByClassName()，querySelectorAll()如下所示：

$('.my_post_container')

如果您坚持让多个对象具有相同的 id（一个不好的选择），那么您将不得不手动迭代所有可能具有该 id 的对象。

$("div[id='my_post_container']");

但是，这是非常低效的，因为浏览器不能使用任何内置的选择器引擎逻辑，如果 jQuery 决定对其进行优化，它可能会在未来中断。你真的应该改用类名。

于 2013-02-27T19:28:25.507 回答
2

我有一个站点有多个具有相同 id 名称的 div。

然后你需要解决这个问题。您不能有多个相同的元素id。id值在页面上必须是唯一的。

您可能想使用classinstead，此时您的代码基本上没问题：

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

...虽然如果hideSnippet不关心它得到什么参数，它可以缩短一点，不关心this，也不返回false：

$('.my_post_container').mouseleave(hideSnippet);
于 2013-02-27T19:28:31.083 回答
1

同一页面上不能有多个元素具有相同的id. 改用 a class，如下所示：

HTML：

<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>

jQuery：

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});
于 2013-02-27T19:29:02.613 回答
0

首先，不应该有任何具有相同 ID 名称的 div 元素。首先我们应该通过保持类名相同来解决这个问题。

然后鼠标离开并进入部分..

 $(".testClass").on({
  mouseenter : function() {
          $(this).css({"background-color" : "blue"});
  },
  mouseleave : function() {
          $(this).css({"background-color" : "green"});
  }
 });

这应该工作..将添加一个js示例http://jsfiddle.net/meVc6/

同样的事情也可以使用 css 来实现..

只需添加css.testClass:hover { background-color:blue}

于 2013-02-27T19:48:17.343 回答