Cómo definir una función de controlador de clic para múltiples elementos al mismo tiempo

Básicamente tengo muchos CSS divs de los cuales tengo que escribir la función onclick de cada uno, quiero escribir la función Click una vez y quiero decirles función si es elemento a do 1 y si es elemento b do 2.Cómo definir una función de controlador de clic para múltiples elementos al mismo tiempo

¿puedo saber cómo escribir la función en jQuery?

$('.gil_Ads_BlankDock1').click(function(){ 

     $('#gDescZone1').hide(); 
     $('#gDescZone2').hide(); 
     $('#descAd1').hide(); 
     $('#descAd2').hide(); 
     $('#descAd3').hide(); 
     $('#descAd4').hide();   
     $('#header').hide(); 
     $('#contentArea').hide(); 
     $('#marquee').hide();   
     $('#BottomDock').fadeIn(); 
}); 

$('.gil_Ads_BlankDock2').click(function(){ 

     $('#gDescZone1').hide(); 
     $('#gDescZone2').hide(); 
     $('#descAd1').hide(); 
     $('#descAd2').hide(); 
     $('#descAd3').hide(); 
     $('#descAd4').hide();   
     $('#header').hide(); 
     $('#contentArea').hide(); 
     $('#marquee').hide();   
     $('#BottomDock').fadeIn(); 
}); 

$('.gil_Ads_BlankDock3').click(function(){ 

     $('#gDescZone1').hide(); 
     $('#gDescZone2').hide(); 
     $('#descAd1').hide(); 
     $('#descAd2').hide(); 
     $('#descAd3').hide(); 
     $('#descAd4').hide();   
     $('#header').hide(); 
     $('#contentArea').hide(); 
     $('#marquee').hide();   
     $('#BottomDock').fadeIn(); 
});

arriba el código dado es mi función de hacer clic que quiero escribir en corte de foto.

Fuente

2011-03-12 Shabir Gilkar

¿Alguna vez ha utilizado la coma en un selector de CSS? – BoltClock

+1 a todas las respuestas anteriores. También puede mantener una matriz de todos los selectores para ocultar si no puede reescribir el código:

var mult = ['#gDescZone1','#gDescZone2','#descAd1','#descAd2', 
       '#descAd3','#descAd4','#header','#contentArea',"#marquee']; 
$.each(mult,function(index,value){ 
    $(value).hide(); 
});

Fuente

2011-03-12 06:08:15 philwinkle

$('.gil_Ads_BlankDock1, .gil_Ads_BlankDock2, .gil_Ads_BlankDock3').click(function(){ 

     $('#gDescZone1, #gDescZone2, #descAd1, #descAd2, #descAd3, #descAd4, #header, #contentArea, #marquee').hide(); 
     $('#BottomDock').fadeIn(); 
});

escribir menos, hacer más :)

Ahora bien, si usted acaba de tener una manera de escribir menos marcado ...

Fuente

2011-03-12 05:54:53 harpo

Gracias ... Básicamente mis divs se colocan en diferentes dimensiones, así que utilicé varios muelles y en cada docks necesito mostrar diferentes datos ... Gracias de todas formas ... y tuve que referir el elemento particular al que se hizo clic en la declaración if else como e.target .... –

O de alguna otra manera ... ?? –

No estoy seguro de entender su pregunta ... pero sí, puede usar ** event.target ** para indicar en cuál de los elementos se hizo clic, simplemente cambie la función ** function() ** to ** (event) **. – harpo

$('.gil_Ads_BlankDock1, .gil_Ads_BlankDock2, .gil_Ads_BlankDock3').click(function(){ 

     $('#gDescZone1').hide(); 
     $('#gDescZone2').hide(); 
     $('#descAd1').hide(); 
     $('#descAd2').hide(); 
     $('#descAd3').hide(); 
     $('#descAd4').hide();   
     $('#header').hide(); 
     $('#contentArea').hide(); 
     $('#marquee').hide();   
     $('#BottomDock').fadeIn(); 
});

O, si usted tiene la oportunidad de refactorizar su margen de beneficio , se puede dar a sus recipientes de la misma clase, por ejemplo "anuncios":

$('.ads').click(function(){ 

     $('#gDescZone1').hide(); 
     $('#gDescZone2').hide(); 
     $('#descAd1').hide(); 
     $('#descAd2').hide(); 
     $('#descAd3').hide(); 
     $('#descAd4').hide();   
     $('#header').hide(); 
     $('#contentArea').hide(); 
     $('#marquee').hide();   
     $('#BottomDock').fadeIn(); 
});

también puede agrupar sus operaciones de ocultación:

$('.ads').click(function(){ 
     $('#gDescZone1, #gDescZone2, #descAd1, #descAd2, #descAd3, \ 
      #descAd4, #header, #contentArea, #marquee').hide();   
     $('#BottomDock').fadeIn(); 
});

Cabe agregar, que podría dar a los elementos que se oculta la misma clase, diga "hideable":

$('.ads').click(function(){ 
     $('.hideable').hide();   
     $('#BottomDock').fadeIn(); 
});

La última forma sería la forma más apropiada de hacerlo, si usted tiene la oportunidad para agregar estas clases adicionales a su marcado.

Fuente

2011-03-12 05:55:42

Ahora puedo saber cómo hacer referencia a un elemento particular al que se ha hecho clic en la declaración if else –

'this' le dará el elemento DOM que se hizo clic. '$ (this)' lo envuelve dentro de un objeto jQuery. A continuación, puede acceder a los atributos del elemento con '$ (this) .attr (" some-attribute ")'. 'this.id' te da el elemento id. Todo esto es fundamental, algo básico que te animamos a leer. Si yo fuera tú, dedicaría un tiempo a buscar en línea la documentación de jQuery. –

Cómo definir una función de controlador de clic para múltiples elementos al mismo tiempo

Respuesta

Cuestiones relacionadas