Asignar acción en jquery a múltiples enlaces

Publicada el por

Veamos la manera de asignar una funcion que se ejecuta al pulsar sobre uno de los enlaces a los que se les ha asignada la misma clase. El artículo muestra como asignar la misma acción en jQuery a múltiples enlaces.

En muchas ocasiones nos interesa que al clicar sobre los enlaces de un apartado, el que sea, se ejecute una acción determinada. Pongamos un ejemplo:

Tengo un submenú en la parte izquierda con varios enlaces. Al clicar sobre alguno de ellos, queremos que muestre una ventana modal. Tenemos dos opciones, o aplicamos uno a uno la acción a realizar sobre cada enlace o:

Asignamos a todos los enlaces que nos interese una clase, en nuestro ejemplo .linkaccion

<a href="enlace1.html" class="linkaccion">Enlace 1</a>
<a href="enlace2.html" class="linkaccion">Enlace 2</a>
<a href="enlace3.html" class="linkaccion">Enlace 3</a>
<a href="enlace4.html" class="linkaccion">Enlace 4</a>

Ahora entra en acción jQuery asignando a todos los enlaces con la clase .linkaccion la función script deseada:

var btnAccionClick = function(e){
    alert("Boton clicado: "+ e.currentTarget.id);
}

$('.linkaccion').on('click', btnAccionClick);

Como veréis tenemos la función btnAccionClick() por un lado. Por otro a todos los enlaces con clase .linkaccion le asignamos dicha función que se ejecutará al clicar.

Lógicamente, el código que ejecuta dicha acción, deberá encargarse de ‘averiguar’ qué enlace ha sido clicado. En nuestro ejemplo utilizamos «e.currentTarget.id» para mostrar la información deseada, pero del enlace pulsado y no del resto.

Espero que os sea de utilidad el artículo de cómo asignar la misma acción en jQuery a múltiples enlaces.

Más información