Изоляция функций jQuery - PullRequest
Новая
       12

Изоляция функций jQuery

0 голосов
/ 28 мая 2009

У меня есть некоторый код jQuery, который выделяет ссылку при нажатии и изменяет размер шрифта и цвет определенных ссылок на странице. Моя проблема в том, что некоторые функции в моем jQuery выполняются на ВСЕХ ссылках на сайте, а не только на тех в div, на которые я пытаюсь ориентироваться.

Вот мой код: 

    $(document).ready(function() {
    slide("#sliding-navigation", 22, 17, 175, .8);
});

function slide(navigation_id, font_out, font_in, time, multiplier) {
    // Creates the target paths
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";

    // Initiates the timer used for the initial sliding animation
    var timer = 0;

    // Create the beginning slide animation
    $(list_elements).each(function(i) {
        // updates timer
        timer = (timer*multiplier + time);
        $(this).animate({ marginLeft: "0" }, timer);
        $(this).animate({ marginLeft: "15px" }, timer);
        $(this).animate({ marginLeft: "0" }, timer);
    });

    // Creates the hover effect
    $(link_elements).each(function(i) {
        $(this).mouseenter(function () {
            $(this).animate({ fontSize: font_out }, 200);
        }), 
        $(this).mouseleave(function () {
            $(this).animate({ fontSize: font_in }, 400);
        }),
        // Highlights active link   
    $('a').addClass('inactive');
    $('a').click(function() {
        $('ul#sliding-navigation a').stop().animate({ fontSize : font_in }, 500);
        $(this).stop().animate({ fontSize : font_out }, 0);
        $('a.active').mouseenter(function () {
          $(this).stop().animate({ fontSize : font_out }, 200);
        }).mouseleave(function() {
          $(this).stop().animate({ fontSize : font_in }, 400);
        }),
        $('a.active').addClass('inactive');
        $('a.active').removeClass('active');
        $(this).removeClass('inactive');
        $(this).addClass('active');
        $(this).unbind('mouseleave mouseenter');
    });
  });
}

Я почти уверен, что проблема в этой строке: 

        $(this).stop().animate({ fontSize : font_out }, 0);

Есть ли способ поместить что-то в начало этой строки, чтобы "this" было активным, только если это ссылка в списке "ul#sliding-navigation"?

Спасибо за помощь! Я действительно ценю это ...

Ответы [ 3 ]

2 голосов
/ 28 мая 2009

Почему бы просто не использовать соответствующий селектор при создании обработчика событий? 

$('#sliding-navigation a').click(function() {});

Кроме того, меня смущает использование класса и идентификатора в селекторе (ul # Sliding-Navigation).

0 голосов
/ 28 мая 2009

Вы также можете сократить свой код, используя цепочку, как запись 

 $('a.active').addClass('inactive').removeClass('active');
 $(this).removeClass('inactive').addClass('inactive').unbind('mouseleave mouseenter');

вместо 

$('a.active').addClass('inactive');
$('a.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
$(this).unbind('mouseleave mouseenter');
0 голосов
/ 28 мая 2009

Этот селектор 

$('a').click(function(){
    ...
});

Выбирает каждую ссылку на странице. Если вы хотите выбрать только ссылки в вашей навигации, используйте это как предложено kgiannakakis: 

$('#sliding-navigation a').click(function() {});

Если вы хотите выбрать обе ссылки, но изменить только шрифт на определенных, вы можете попробовать что-то вроде этого: 

if( $(this).parent().attr('id') == 'sliding-navigation' ){ 
    $(this).stop().animate({ fontSize : font_out }, 0); 
}
...