切换单个元素类，即使它有多个实例答案

【问题标题】：toggle a single elements class eventhough it has multiple instances切换单个元素类，即使它有多个实例
【发布时间】：2014-01-07 21:42:41
【问题描述】：

简单的事情，我就是无法让它工作：

我有几个段落共享同一个类，我只是想在它们的父 div 悬停时更改其中一个类。

<div class="trigger">
   <p class="oldstyle"> some content </p>
/div>

<div class="trigger">
   <p class="oldstyle"> some content </p>
/div>

当我悬停第一个“trigger-div”时，我希望它的 p 改变而不影响后面的元素

<div class="trigger">
   <p class="newstyle"> some content </p>
/div>

<div class="trigger">
   <p class="oldstyle"> some content </p>
/div>

我的以下代码不起作用：//

$('.trigger').hover(function() {
$(this).next(".oldstyle").toggleClass("newstyle");
});

我很无奈！非常感谢。

【问题讨论】：

大概</div>中的错别字是错别字，而不是你的错误来源？

标签： jquery class parent-child multiple-instances toggleclass

【解决方案1】：

尝试孩子，因为它不是兄弟姐妹：

$('.trigger').hover(function() {
    $(this).children(".oldstyle").toggleClass("newstyle");
});

【讨论】：

非常感谢！这行得通:) .. 但是孩子和兄弟姐妹之间到底有什么区别？
@user3170228 - 同级是树上同一级别的元素，例如<div class="item1"></div><div class="item1sibling></div>，而子级是嵌套在树上该项目中的项目，例如<div class="item1"><div class="item1child"></div></div>

【解决方案2】：

我赞成现有的答案，只是想我会为优化目的提供另一个答案：

$('.trigger').on({
    mouseenter:function(){
        $(this).find('.oldstyle').addClass('newstyle');
    },
    mouseleave:function(){
        $(this).find('.oldstyle').removeClass('newstyle');
    }
});

这是.hover() 和.toggleClass() 的更明确的版本，如果您多次进入/离开太快，我对.toggleClass() 多次触发的体验很差，并且像这样明确地这样做消除了问题。我还使用了.find() 而不是.children()，因为一般来说，对于少量子树，它的运行速度比.children() 快，因为缺少“直接子”验证。

【讨论】：