jQuery:使用较少的代码隐藏和淡化div

时间:2013-08-30 07:48:03

标签: jquery performance

我使用jQuery的第一步。下面的代码有效,但我确信它完全臃肿。

以下是该方案:有一个包含9个产品的页面。每次用户点击链接(item[x])时,一般#contentdiv内的所有内容都应隐藏,新内容会逐渐淡入。

新内容包含一般产品信息(#product[x])和其他.info div类(.info1.info2)。

我相信很多初学者都在想如何以更少的膨胀更有效地编写这些代码。有什么想法吗?

HTML:

<div id="contentbox">   
<div id="product1">blah</div><!-- is displayed on pageload -->

<div id="product2" style="display:none;">blah</div>
<div id="product3" style="display:none;">blah</div>
<div id="product4" style="display:none;">blah</div>  
<div id="product5" style="display:none;">blah</div>
<div id="product6" style="display:none;">blah</div>    
<div id="product7" style="display:none;">blah</div>
<div id="product8" style="display:none;">blah</div>       
<div id="product9" style="display:none;">blah</div>

<div class="info1">blah</div><!-- is displayed on pageload -->                  
<div class="info2" style="display:none;">blah</div>

</div><!-- End of #contentbox -->

jQuery的:

$('#item-1').click(function (){$('#contentbox').children().hide();$('#product1').fadeIn(200);$('.info1').fadeIn(200);});
$('#item-2').click(function (){$('#contentbox').children().hide();$('#product2').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-3').click(function (){$('#contentbox').children().hide();$('#product3').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-4').click(function (){$('#contentbox').children().hide();$('#product4').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-5').click(function (){$('#contentbox').children().hide();$('#product5').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-6').click(function (){$('#contentbox').children().hide();$('#product6').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-7').click(function (){$('#contentbox').children().hide();$('#product7').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-8').click(function (){$('#contentbox').children().hide();$('#product8').fadeIn(200);$('.info2').fadeIn(200);});
$('#item-9').click(function (){$('#contentbox').children().hide();$('#product9').fadeIn(200);$('.info2').fadeIn(200);});

2 个答案:

答案 0 :(得分:1)

您可以用

替换整个代码
 $('[id^="item-"]').click(function(){
      var num = this.id.slice(5);
      $('#contentbox').children().hide();
      $('#product'+num).add('.info'+num).fadeIn(200);
 });

解释:

  • [id^="item-"]是ID为“item - ”
  • 的元素的选择器
  • this.id.slice(5)返回id的结尾(超过第五个字符)

我想,就像mplugjan一样,你的例子在.info部分上有点不对。如果是的,请将'.info'+num替换为'.info'+(num==1?1:2)

答案 1 :(得分:0)

有不同的解决方法,比如 dystroy 的答案。

或者您也可以通过向添加data标记来解决此问题

<a class="item" data-product="1" data-info="1">item1</a>
<a class="item" data-product="2" data-info="2">item2</a>
<a class="item" data-product="3" data-info="2">item3</a>

然后你可以这样编写你的js代码:

$(document).on("click", ".item", function(){
   var infoNo = $(this).data("info"),
       productNo = $(this).data("product");

   $('#contentbox').children().hide();
   $('#product'+productNo).fadeIn(200);
   $('.info'+infoNo).fadeIn(200);
});

这允许您为每个项目单独定义应显示哪些产品和信息。

(如果产品和信息的ID相同,而且您的问题中存在错误,那么您只需要一个data代码。