jQuery нет и классы

Question

У меня есть 2 привязных ссылки (a.selector), и когда один щелкнут, у него есть класс, примененный к нему «active-arrow», и щелчок также удаляет класс с тем же именем из другого якоря а также уменьшает непрозрачность до 0,2.

Затем я хочу иметь эффект затухания, когда пользователь навешивается над якорем, который не имеет «активной стрелки», применяемой к нему, так что он становится полностью непрозрачным, когда мышь и обратно до 0,2 при наведении мыши.

Проблема им с что оба .not и : кажется, не не будет работать, как и ожидалось, парения эффект работает, но если я нажимаю на якорь в то время как парит класс «активной стрелкой» применяется, но при наведении курсора мыши непрозрачность снова уменьшается до 0,2, даже если применяется класс «активная стрелка». Кроме того, наведение затем не работает для другого, у которого была удалена «активная стрелка».

Немного трудного для объяснения, поэтому есть код, который, надеюсь, немного помогает.

*//If a.selector doesn't have the class 'active-arrow' then run the hoverFade function* 
$("a.selector").not(".active-arrow").hoverFade(); 

//Functions for first element 
     $('a.selector-1').click(function() { 
      $('a.selector-2').removeClass('active-arrow'); //Remove background image from corresponding element 
      $('ul#storage-items-2').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list 
      $(this).addClass('active-arrow', 'fast'); //Add background image to current element 
      $('ul#storage-items-1').removeClass('hide').fadeIn(1800); //Unhide and fade in the list 
      $('a.selector-2').fadeTo(500, 0.2); //Fade corresponding element 
      $(this).fadeTo(800, 1);//Fade this element to full opacity 
     }); 

Я включил только код для Teh первого якоря (a.selector-1) в качестве кода для второго якоря идентичен, но только изменяет имена классов для a.selector-2.

Также функция hoverFade находится в отдельном файле, поэтому мы можем ее повторно использовать.

jQuery.fn.hoverFade = function() { 
return this.each(function(){ 
     $(this).hover(
       function() { 
        $(this).fadeTo(500, 0.8); 
      }, 
       function() { 
        $(this).fadeTo(500, 0.2); 
     }); 
    }); 

}

Каждая якорная ссылка выцветает и постепенно исчезает в UL, а также.

Любая помощь наиболее ценится

Благодаря

Giles

Answer 1

Это тот случай, когда вы хотите использовать .live() или .delegate(), например:

$("a.selector:not(.active-arrow)").live('mouseenter', function() { 
    $(this).fadeTo(500, 0.8); 
}).live('mouseleave', function() { 
    $(this).fadeTo(500, 0.2); 
}); 

Если вы используете .delegate() верхняя строка будет выглядеть так: (ID = идентификатор общего родителя ко всем этим ссылкам):

$("#ID").delegate("a.selector:not(.active-arrow)", 'mouseenter', function() { 

Причина того, что Вы в настоящее время не работает в том, что он связывает обработчик события к элементам, элементы только должны были соответствовать селектор вы использовали , когда вы их нашли для связывания, один раз что происходит, обработчики событий .hover()mouseenter и mouseleave связаны с этим элементом. Тот факт, что класс изменяется позже, не имеет большого значения, обработчики должны остаться.

Используя выше подход, события на самом деле не на элементах непосредственно, они сидят на родителей, document в случае .live() или #ID в случае .delegate(). Когда события мыши происходят на элементе, который они пузырятся, и родитель видит их, проверяет, имеет ли селектор этот обработчик для совпадений , а затем, и если это выполняется. Это приводит к тому, что изменение класса действительно имеет значение, поскольку оно проверяется, когда происходит событие, а не когда оно связано.