隔离jQuery函数

Question

我有一些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”列表的链接的方式？

谢谢你帮我出去！我真的很感激......

Answer 1

为什么不创建事件处理程序时，只需要使用适当的选择？

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

另外，我发现使用两个类，并在选择器的ID（UL＃滑动导航）混淆。

Answer 2

此选择

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

时的选择页面上的每一个环节。如果你只需要选择你的导航UL的链接以此作为kgiannakakis建议：

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

如果要同时选择所有链接，但只改变特定的一些字体，你可以尝试这样的事：

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

Answer 3

您也可以通过使用链接喜欢写的缩短你的代码

 $('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');