이 jQuery 함수를 추상화

Question

많은 도움을 얻었습니다! 여기에있는 코드는 몇몇 사람들의 도움을 받았습니다. 잘만되면 누군가 나를 도와서 다음 단계로 나아갈 수 있습니다.

기본적으로 왼쪽 탐색에서 클릭 한 항목에 지정된 기간 후에 체크 표시가 추가되는 코드가 있습니다. 해당 왼쪽 링크에 대해 동일한 동작을 트리거 할 페이지의 다른 링크가있을 것입니다. 예를 들어 왼쪽에는 10 개의 링크가 있고 왼쪽에는 10 개의 링크가있어 해당 링크를 트리거해야합니다. 이 코드를 추상화하여 다른 소스에서 활성화 할 수 있도록 노력하고 있습니다. 더 쉽게 만들려면 탐색 외부의 소스에서이 코드를 트리거하는 방법으로 생각할 수 있습니다. 코드는 다음과 같습니다.

$(function() { 

var thetimeout=null; 
$('#leftnav li a').click(function() { 
     $('#leftnav li').not('this').css('background-position','left bottom'); 
     $(this).parent().css('background-position','left top'); 
     if(thetimeout!=null) { 
      window.clearTimeout(thetimeout); 
     } 

     thetimeout=window.setTimeout($.proxy(function() { 
       $(this).parent().css('background-image','url(images/check.png)'); 
      }, this) 
     ,5000); 
}); 

});

내가 당신의 시간 here.

덕분에 최대 (상단 링크가 작동하지 않습니다)와 함께 작업 데모를 가지고, 정말 감사합니다.

Answer 1

어쩌면 작동할까요?

wireClickEvent("#leftnav li"); 
wireClickEvent("#topnav li"); 

function wireClickEvent(selector) { 
    $(selector + ' a').click(function() { 
     $(selector).not('this').css('background-position','left bottom'); 
     // rest of your code 
     // ... 
    } 
} 

Answer 2

이것은 jQuery 플러그인을 매우 훌륭하게 만드는 이유입니다. 코드를 플러그인으로 변환하십시오.

소스를 보면 상위 링크가 목록에없는 것을 볼 수 있습니다. 목록에 넣음으로써 우리는 같은 방식으로 그들을 타겟팅 할 수 있습니다.

$('.nav-items,.top-items').checkMyLinks(); 

목록을 타겟팅하므로 하위 항목에 대한 플러그인 논리를 수행 할 수 있습니다.

$.fn.checkMyLinks=function(opt){ 
    return this.each(function(){ 
    var t=$(this), 
     timer=null;// each plugin instance has its own timer 

    t.delegate('click', 'li a', function(e){ 
     var parent=$(this).parent();//the <li> above the clicked link 

     //css classes here? 
     t.find('li').css({backgroundPosition: 'left bottom'}); 
     parent.css({backgroundPosition: 'left top'}) 

     //deal with your timer... 
    }); 
    }); 
}; 

상위 링크를 목록에 넣고 싶지 않으면 플러그인을 적합하게 수정할 수 있습니다.

행운을 빌어 요!