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

我有一个站点，它有多个具有相同id名称的div。我想为所有具有此id的div设置mouseleave函数。在我的

$（文档）中。就绪
函数我有此代码

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

My
hideSnippet（）
函数是正确的，但这样做只会在id
My\u post\u容器出现div时设置mouseleave函数。有没有办法将mouseleave函数设置为具有此id的所有div？
具有相同id的多个对象是无效的HTML。因此，您不能使用普通选择器来查找所有对象，您应该修复HTML以避免这样做

#1建议修复HTML，使其不具有具有相同ID的多个对象。使用类名，然后可以使用
getElementsByClassName（）
或
querySelectorAll（）
或jQuery选择器选择所有对象，如中所示：

$('.my_post_container')

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

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

但是，这是非常低效的，因为浏览器不能使用任何内置的选择器引擎逻辑，如果jQuery决定对此进行优化，它将来可能会崩溃。您确实应该切换到使用类名。
具有多个具有相同id的对象是无效的HTML。因此，您不能使用普通选择器来查找所有对象，您应该修复HTML以避免这样做

#1建议修复HTML，使其不具有具有相同ID的多个对象。使用类名，然后可以使用
getElementsByClassName（）
或
querySelectorAll（）
或jQuery选择器选择所有对象，如中所示：

$('.my_post_container')

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

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

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

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

那么你需要解决这个问题。不能有多个元素具有相同的
id

您可能希望使用，此时您的代码基本上是良好的：

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

…尽管如果
hideSnippet
不关心它得到的参数，不关心
这个
，也不返回
false，它可以被缩短一点：

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

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

那么你需要解决这个问题。不能有多个元素具有相同的
id

您可能希望使用，此时您的代码基本上是良好的：

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

…尽管如果
hideSnippet
不关心它得到的参数，不关心
这个
，也不返回
false，它可以被缩短一点：

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

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

HTML:

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

HTML:

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

然后在鼠标左键并输入零件

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

这应该行得通。。将添加一个js示例

同样的事情也可以通过css实现

只需添加css
.testClass:hover{background color:blue}
首先，不应该有任何具有相同ID名称的div元素。。首先，我们应该通过保持类名不变来解决这个问题

然后在鼠标左键并输入零件

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

这应该行得通。。将添加一个js示例

同样的事情也可以通过css实现

只需添加css
.testClass:hover{background color:blue}
您不应该有多个具有相同ID的div。这是错误的HTML。ID必须是唯一的。改为使用类。这也将解决您的问题您不应该有多个具有相同ID的div。这是糟糕的HTML。ID必须是唯一的。改为使用类。这也会解决你的问题。洛尔，当我读到《非法》时，我以为你会说“在被捕前立即删除”：@mattytomo:：-）是的，“无效”是更准确的说法。（“非法”也可以，但是…）好的，将其更改为无效。@jfriend00更好，+1为您：）@jfriend00:althing
$（“div[id='my\u post\u container']）
可能会找到多个具有
id
的元素，但不能保证它会找到，原因很简单：A）jQuery可能随时优化该行为，B）如果
id
已经在使用，浏览器完全可以忽略
id
属性，而不将其分配给元素。因此，我强烈建议去掉这一点。：-）哈哈，当我读到《非法》时，我还以为你会说“在被捕之前立即删除它”：@mattytomo:：-）是的，“无效”是更准确的说法。（“非法”也可以，但是…）好的，将其更改为无效。@jfriend00更好，+1为您：）@jfriend00:althing
$（“div[id='my\u post\u container']）
可能会找到多个具有
id
的元素，但不能保证它会找到，原因很简单：A）jQuery可能随时优化该行为，B）如果
id
已经在使用，浏览器完全可以忽略
id
属性，而不将其分配给元素。因此，我强烈建议去掉这一点。：-）我可以更改代码，使每个块都是一个类而不是一个ID，但这仍然无助于解决我的问题。如果它是一门课