Isolieren von jQuery-Funktionen

Question

Ich habe einige jQuery-Code, der einen Link hebt, wenn darauf geklickt, und ändert die Schriftgröße und -farbe bestimmter Links auf der Seite. Mein Problem ist, dass einige der Funktionen in meiner jQuery ausgeführt wird auf alle Links auf der Website, und nicht nur die, die in der div, dass ich zum Ziel versuchen.

Hier ist mein Code so weit:

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

Ich bin fast sicher, dass das Problem in dieser Zeile ist:

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

Gibt es eine Möglichkeit, etwas in dem Anfang dieser Zeile zu setzen, damit „this“ wird nur dann aktiv sein, wenn es ein Glied in der „ul#sliding-navigation“ Liste?

Vielen Dank für die Hilfe aus! Ich schätze es wirklich ...

Answer 1

Warum nicht einfach den entsprechenden Selektor verwenden, wenn die Ereignisbehandlungsroutine zu erstellen?

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

Auch finde ich sowohl mit einer Klasse und eine ID in einem Selektor (ul # Schiebe-Navigation) verwirrend.

Answer 2

Dieser Selektor

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

Ist jeder Link auf der Seite auswählen. Wenn Sie nur die Links in der Navigation ul zu nutzen, als kgiannakakis auswählen möchten vorgeschlagen:

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

Wenn Sie sowohl alle Links wählen, sondern nur die Schriftart auf bestimmte diejenigen ändern Sie so etwas wie dies ausprobieren können:

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

Answer 3

Sie können auch Ihren Code verkürzen durch die Verwendung von Verkettungs wie das Schreiben

Herstellung

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

statt

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