如何同时为多个元素定义Click处理函数

Question

基本上我有很多CSS div,我需要编写每个的onclick函数,我想写一次Click函数,并且我想告诉函数它是否是元素ado 1,如果它是元素bdo 2.

我可以知道如何在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();
 });

上面给出的代码是我的几个点击功能,我想在镜头中写.

Answer 1

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

或者,如果您有机会重构您的标记,您可以为您的容器提供相同的类别,例如"广告":

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

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

您还可以对隐藏操作进行分组:

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

Morover,你可以给你隐藏同一个类的元素,比如说"hideable":

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

如果您有机会将这些额外的类添加到标记中,那么最后一种形式将是执行此操作的正确方法.

Answer 2

对以上所有答案+1。如果您无法重写代码，您还可以维护所有要隐藏的选择器的数组：

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