0

我有一些 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

谢谢你的协助！对此，我真的非常感激...

4

3 回答 3

2

为什么在创建事件处理程序时不使用适当的选择器？

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

此外，我发现在选择器（ul #sliding-navigation）中同时使用类和 id 令人困惑。

于 2009-05-28T14:03:08.107 回答
0

这个选择器

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

正在选择页面上的每个链接。如果您只想选择导航 ul 中的链接，请按照 kgiannakakis 的建议使用：

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

如果您想同时选择所有链接，但只更改某些链接的字体，您可以尝试以下操作：

if( $(this).parent().attr('id') == 'sliding-navigation' ){ 
    $(this).stop().animate({ fontSize : font_out }, 0); 
}
于 2009-05-28T14:14:46.770 回答
0

您还可以通过使用链式编写来缩短您的代码

 $('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');
于 2009-05-28T14:53:24.010 回答