Question

简单的事情，我无法让它发挥作用：

我有几个共享相同类的段落，我只想更改其中一个类，因为它们的父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");
});

我很无奈！谢谢你们。

Answer 1

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

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

Answer 2

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

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

这是.hover()和.toggleClass()的一个更明确的版本，如果您多次进入/离开多次，我只会遇到.toggleClass()多次触发的经验不佳它明确地像这样消除了这个问题。我还使用了.find()而不是.children()，因为一般来说，由于缺少“直接孩子”验证，它的运行速度比.children()小。{/ p>

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

2 个答案: