переключить класс одного элемента, даже если он имеет несколько экземпляров

простая вещь, и я просто не могу заставить ее работать:

у меня есть несколько абзацев, которые имеют один и тот же класс, и я просто хочу изменить один из этих классов, поскольку их родительский элемент div зависает.

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

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

когда я наводил курсор на первый «триггер-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");
});

я беспомощен! благодаря тонну.


class jquery parent-child multiple-instances toggleclass
person benniy    schedule 07.01.2014    source источник
comment
Предположительно опечатки в </div> являются опечатками, а не источником вашей ошибки?   -  person Scott Mermelstein    schedule 08.01.2014

Ответы (2)


arrow_upward
3
arrow_downward

Попробуйте детей, так как это не родной брат:

$('.trigger').hover(function() {
    $(this).children(".oldstyle").toggleClass("newstyle");
});
person Karl-André Gagnon    schedule 07.01.2014
comment
большое спасибо! это работает :) .. но в чем именно разница между детьми и братьями и сестрами? - person benniy; 08.01.2014
comment
@user3170228 user3170228 — братья и сестры — это элементы на одном уровне дерева, например <div class="item1"></div><div class="item1sibling></div>, тогда как дочерние элементы — это элементы, вложенные в этот элемент дерева, например <div class="item1"><div class="item1child"></div></div> - person PlantTheIdea; 08.01.2014

arrow_upward
0
arrow_downward

Я проголосовал за существующий ответ, просто подумал, что дам другой ответ для целей оптимизации:

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

Это более явная версия .hover() и .toggleClass(), у меня просто был плохой опыт с .toggleClass() срабатыванием несколько раз, если вы входите / выходите слишком быстро несколько раз, и выполнение этого явно, как это, устранило эту проблему. Я также использовал .find() вместо .children(), потому что, вообще говоря, с небольшим объемом дочерних деревьев он работает быстрее, чем .children() из-за отсутствия проверки "непосредственного потомка".

person PlantTheIdea    schedule 07.01.2014