jQuery combiner des déclarations?

Question

Comment puis-je simplifier ces déclarations, au lieu d'avoir à compter sur toute la UPT à 34 ans et ayant 34 déclarations séparées ... ..

$('a#timeline-2010-lnk1').click(function() { 
    $('#timeline-2010-1').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk2').click(function() { 
    $('#timeline-2010-2').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk3').click(function() { 
    $('#timeline-2010-3').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk4').click(function() { 
    $('#timeline-2010-4').show(); 
    return false; 
    }); 

Answer 1

$("a[id^=timeline-2010-lnk]").live("click", function() { 
    var num = this.id.split(/-(?:lnk)?/).pop(); 
    $('#timeline-2010-'+num).show(); 
    return false; 
}); 

plus efficace car il utilise delegate()/live(). Au lieu d'attacher de nombreux gestionnaires de clics, un gestionnaire unique est placé sur le nœud ancêtre commun, auquel les événements cliquables vont apparaître. Comme @rochal pointed out, il serait encore plus approprié d'utiliser un seul nom de classe pour tous les éléments et de profiter de la relation entre les deux éléments (via parent/etc). Cependant, si vous le pouvez, vous devriez toujours envisager d'utiliser live() ou delegate() pour le gestionnaire.

Answer 2

Ajouter un className commun à tous les éléments:

<a href="#" id="timeline-2010-lnk1" class="clicker">Text 1</a> 
<a href="#" id="timeline-2010-lnk2" class="clicker">Text 2</a> 
<a href="#" id="timeline-2010-lnk3" class="clicker">Text 3</a> 
<a href="#" id="timeline-2010-lnk4" class="clicker">Text 4</a> 
<a href="#" id="timeline-2010-lnk5" class="clicker">Text 5</a> 
... 

Ensuite, vous pouvez simplifier votre code HTML, et de se débarrasser des ID tous ensemble:

<a href="#" class="clicker">Text 1</a> 
<a href="#" class="clicker">Text 2</a> 
<a href="#" class="clicker">Text 3</a> 
<a href="#" class="clicker">Text 4</a> 
<a href="#" class="clicker">Text 5</a> 
... 

Ensuite, tout ce que vous avez à faire est :

$('.clicker').click(function() { 
    $(this). /* parent? sibling? I'd have to see your code */ .show(); 
    return false; 
}); 

Noeud concernant mon commentaire dans le code:

Je suppose que #timeline-2010-[X] est une sorte de div que vous voulez montrer, donc au lieu d'utiliser des ID à nouveau, appliquer une classe et d'utiliser .siblings() ou .find() etc.

Answer 3

Tant que vous utilisez jQuery, essayez quelque chose comme ceci:

$('a[id^=timeline-2010-lnk]').click(function() { 
    var id = '#' + this.id.replace(/lnk/, ''); 
    $(id).show(); 
    return false; 
}); 

cela va récupérer tous les liens dont l'attribut id commence par « timeline-2010-LNK » et joindre un événement de clic. Vous obtenez l'identifiant correspondant en supprimant simplement la partie "lnk" de l'identifiant du lien.

Voici un doc pour l'attribut « commence par » sélecteur: http://api.jquery.com/attribute-starts-with-selector/

De plus, voici une démo simple montrant cette méthode dans l'action: http://jsfiddle.net/eL3Yw/

Answer 4

Vous pouvez utiliser une boucle for comme Luca suggéré précédemment (supprimé). Mais vous devez créer une aide « de la fonction auto-invocation » afin de garder les choses:

for(var i=1; i<=34; i++) { 
    (function(index){ 
     $('a#timeline-2010-lnk'+index).click(function() { 
      $('#timeline-2010-'+index).show(); 
      return false; 
     }); 
    })(i); 
}​ 

Pourquoi? Javascript a seulement function scope et pas un block scope comme dans la plupart des autres langages C-like. Donc, i n'est pas lié à la portée de la for-loop donc le closure functions que vous créez en tant que gestionnaire d'événements à click référencera tous les mêmes i. En créant une nouvelle fonction qui s'exécute à l'exécution, vous pouvez contourner ce problème.

Answer 5

Utilisez un sélecteur d'attribut startswith avec $.chaque

$('a[id^=timeline-2010-lnk]').each(function() { 
    var idx = $(this).attr('id').match(/\d+$/); 

    if (idx !== null) { 
     $(this).click(function() { 
      $('#timeline-2010-' + idx[0]).show(); 
      return false; 
     }); 
    } 
});