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

또한 셀렉터 (UL #슬라이딩 탐색)에서 클래스와 ID를 모두 사용하여 혼란스러워합니다.

Answer 2

이 선택기

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

페이지의 모든 링크를 선택하고 있습니다. 내비게이션에서 링크 만 선택하려면 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');