1

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

场景如下：有一个包含 9 个产品的页面。每次用户点击一个链接 ( item[x]) 时，General 中的所有内容#contentdiv都应该隐藏，新内容淡入。

新内容由一般产品信息 ( #product[x]) 和附加的.infodiv 类 ( .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);});
4

2 回答 2

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).

于 2013-08-30T07:50:11.897 回答
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标签）。

于 2013-08-30T08:04:13.837 回答