JQuery не и классы - PullRequest
Новая
       18

JQuery не и классы

0 голосов
/ 17 мая 2010

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

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

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

Трудно объяснить, вот код, который, надеюсь, немного поможет. 

*//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
        });

Я включил код только для первой привязки (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

1 Ответ

2 голосов
/ 17 мая 2010

Это тот случай, когда вы хотите использовать .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(). Когда события мыши происходят на элементе, они всплывают, и родитель видит их, проверяет, соответствует ли селектор, который используется обработчику, совпадениям , затем и, если это так, выполняется. Это делает изменение класса действительно важным, поскольку оно проверяется, когда событие происходит, а не когда оно было связано.

...