我使用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);});
答案 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
代码。