abstraction de cette fonction jQuery

Question

Vous avez eu beaucoup d'aide ici! Le code ici a été aidé par quelques personnes. J'espère que quelqu'un pourra m'aider à passer au niveau supérieur.

Fondamentalement, j'ai un code qui va ajouter une coche après une période de temps donnée à un élément cliqué dans la navigation de gauche. Il va y avoir d'autres liens sur la page qui vont déclencher le même comportement pour les liens gauches correspondants. Ainsi, par exemple, il y aurait 10 liens sur la gauche, et 10 liens sur le dessus qui auraient chacun besoin de déclencher un lien correspondant sur la gauche. J'essaie de faire abstraction de ce code pour pouvoir l'activer depuis une autre source. Pour le rendre plus facile, il peut être pensé comme comment déclencher ce morceau de code d'une source en dehors de la navigation. Voici le code:

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

});

J'ai une démonstration de travail (avec les liens en haut ne fonctionne pas) jusqu'à here.

Merci pour votre temps, je l'apprécie vraiment.

Answer 1

peut-être que cela fonctionnera?

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

C'est ce qui rend les plugins jQuery si agréables. Transformez votre code en un plugin.

En regardant votre source, je vois que les liens supérieurs ne sont pas dans une liste. En les mettant dans une liste, nous pouvons les cibler de la même manière. Comme nous visons la liste, nous pouvons exécuter notre logique de plugin sur ses éléments enfants.

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

Si vous ne voulez pas mettre les liens en haut dans une liste, vous pouvez modifier le plugin pour convenir.

Bonne chance!