jQuery ¿combinar declaraciones?

Question

¿Cómo puedo simplificar estas declaraciones, en lugar de tener que contar todo el camino UPT a 34 y que tiene 34 estados separados ... ..

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

más eficiente ya que utiliza delegate()/live(). En lugar de asociar muchos manejadores de clics, se coloca un solo manejador en el nodo ancestro común, y los eventos de clic aparecerán hasta.

Como @rochal pointed out, aún más apropiado podría ser utilizar un solo nombre de clase para todos los elementos y aprovechar la relación entre los dos elementos (a través de parent/etc). Sin embargo, si puede, aún debe considerar usar en vivo() o delegado() para el manejador.

Answer 2

Añadir un nombre de clase común a todos los elementos:

<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> 
... 

Entonces, se podría simplificar el código HTML, y deshacerse de los ID de todos juntos:

<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> 
... 

Entonces, todo lo que tiene que hacer es :

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

nodo con respecto a mi comentario en el código:

que asumen que #timeline-2010-[X] es una especie de div que desea mostrar, por lo que en lugar de utilizar los identificadores de nuevo, se aplica una clase y el uso .siblings() o .find() etc.

Answer 3

Mientras estás usando jQuery, intente algo como esto:

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

esto agarrar todos los enlaces cuyo atributo id comienza con "línea de tiempo-2010-LNK" y adjuntar un evento de clic. Obtiene la identificación correspondiente simplemente eliminando la parte "lnk" de la identificación del enlace.

Aquí es un documento para el "atributo comienza con" Selector: http://api.jquery.com/attribute-starts-with-selector/

Además, aquí es una demostración simple que muestra este método en acción: http://jsfiddle.net/eL3Yw/

Answer 4

Usted puede utilizar un bucle for como Luca sugirió anteriormente (suprimido) Pero usted tiene que crear una "función de auto-invocando" ayudante con el fin de mantener las cosas bien:

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

¿Por qué? Javascript solo tiene function scope y no block scope como en la mayoría de los demás lenguajes tipo C. Por lo tanto, i no está vinculado al alcance del for-loop POR LO TANTO, el closure functions que está creando como controlador de eventos en click hará referencia al mismo i.

Al crear una nueva función que se invoca en el tiempo de ejecución, puede solucionar este problema.

Answer 5

Use un selector de atributo startswith con $.cada

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