我有一个带有图像缩略图的旋转木马。单击时,它们显示相应的div并隐藏所有其他div。此处为Live Site。
目前的脚本是有效的,除了我现在有大约30个div和相应的缩略图,而不是3个,客户端可以通过WordPress添加更多。因此,我需要一种更简单的方法来表示"隐藏除所选之外的所有div",而不使用实际的div编号。
HTML:
<div class="carousel">
<a id="lnk1"><img src="images/projects/game1.jpg" /></a>
<a id="lnk2"><img src="images/projects/game2.jpg" /></a>
<a id="lnk3"><img src="images/projects/game3.jpg" /></a>
</div>
<div class="content">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
当前Javascript:
$(document).ready(function() {
var h1 = $("#div1").height();
var h2 = $("#div2").height();
var h3 = $("#div3").height();
$("#div1,#div2,#div3").height(Math.max(h1, h2, h3));
$("#div2,#div3").hide();
$("#lnk1").live('click', function() {
$("#div1").show();
$("#div2,#div3").hide();
});
$("#lnk2").live('click', function() {
$("#div2").show();
$("#div1,#div3").hide();
});
$("#lnk3").live('click', function() {
$("#div3").show();
$("#div1,#div2").hide();
});
我建议您使用div"carousel"的子级(anchor
(的点击事件。单击时,首先隐藏"内容"div
中的所有元素(div
(。然后使用"this
"对象来获取cliked锚点的索引。然后使用该索引来显示currespondingdiv。在这里,你可以看到索引是连接两者的一个东西。所以你必须在两者中保持相同的顺序。
HTML
<div class="carousel" >
<a id="lnk1" >image 1</a>
<a id="lnk2" >image 2</a>
<a id="lnk3" >image 3</a>
<a id="other1" >image 4</a>
<a id="other2" >image 5</a>
</div>
<div class="content">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="other_div1">div4</div>
<div id="other_div2">div5</div>
</div>
jQuery
$(".carousel > a").live('click', function() {
$(".content > div").hide(); //hide all divs
$(".content > div").eq($(this).index()).show();//display curresponding div of the clicked anchor
});
http://jsfiddle.net/arjuncc/3nMgA/4/
您可以使用.siblings()
:
$('.carousel a').click(function() {
$('.content div').eq($(this).index()).show().siblings().hide();
});