Question

基本上我有很多CSS div，我需要编写每个的onclick函数，我想写一次Click函数，我想告诉函数它是否是元素a做1和if它是元素b做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

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

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

少写，多做：）

现在，如果你有办法减少标记......

Answer 3

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

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

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

3 个答案: