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() {});

此外，我发现在选择器（ul＃sliding-navigation）中使用类和id都会造成混淆。

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

隔离jQuery函数

3 个答案: