Question

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

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

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

Answer 1

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

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

$('.my_post_container')

如果你坚持让多个具有相同id的对象（一个糟糕的选择），那么你将不得不在某种程度上手动迭代所有可能具有该id的对象。

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

但是，这非常低效，因为浏览器不能使用任何内置的选择器引擎逻辑，如果jQuery决定优化它，它将来可能会破坏。你真的应该转而使用类名。

Answer 2

我的网站有多个具有相同ID名称的div。

然后你需要解决这个问题。您不得拥有多个具有相同id的元素。 id values must be unique on the page

您可能希望使用class instead，此时您的代码基本上没问题：

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

...如果hideSnippet不关心它得到什么参数，不关心this，并且不返回false，那么可以稍微缩短一点：

$('.my_post_container').mouseleave(hideSnippet);

Answer 3

同一页面上的多个元素不能与id相同。请改用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();
});

Answer 4

首先，不应该有任何具有相同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}

如何为具有相同id的多个div设置jQuery mouseleave函数

4 个答案: