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

ページ上のすべてのリンクを選択しています。ナビゲーションでリンクのみを選択したい場合は、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 に答える