Question

我有几个divs由php生成，里面有不同的contenst，而且每个divs都有几条评论。

在每个div中，以及每个评论中，我使用jquery来显示/隐藏更多内容，或动画内容，甚至upvote / downvote评论。

我知道如何告诉JQuery在目标div上做事情，比如：

   $('#div1').hover( function() {
        $("#div1").toggleClass("class1");
   } );

但我从来没有同时在几个div（也有相同的类名）上做过。

更具体一点，我想了解如何告诉JQuery定位每个生成的div而不是特定的div，并在其中做事（不干扰其他具有完全相同类名的div用php生成。）

我希望我足够清楚，我从来没有那么深入使用JQuery，并且在为这个请求找出正确的词汇表时遇到了麻烦。

谢谢！

Answer 1

您应该为正在生成的div指定一个特定的类名，并在这些元素上绑定一个悬停事件。但是，只有在注册事件时DOM中已存在元素时才能使用此功能。

$('div.someClassName').hover(function()
{
   $(this).toggleClass("class1");
});

如果您动态生成元素，则需要在文档上从hover绑定切换到mouseover mouseover事件委派（因为悬停只能绑定，不能委托）< / p>

$(document).on('mouseover mouseout','.someClassName',function()
  {
    $(this).toggleClass('class1');
  });

如果您希望不考虑班级名称的所有div：

$('div').hover(function()
{
  $(this).toggleClass('class1');
});

如果您希望定位具有多个类的元素

$('div.someClassName, div.someClassName2').hover(function()
{
  $(this).toggleClass('class1');
});

Answer 2

如果您使用PHP通过Ajax生成HTML，则不必担心它们直接继承事件，因为jQuery仅将事件绑定到DOM中当前选定的元素，除非委派。此外，您还希望使用$（this）来定位触发事件的当前元素。由于它建议不要重复使用ID，因此我选择了一个类：

$('.hover-this').on('mouseover mouseout', function() {
    $(this).toggleClass('class1');
});