Question

我使用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);});

Answer 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)。

Answer 2

有不同的解决方法，比如 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代码。

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

2 个答案: