0

画像のサムネイルを含むカルーセルがあります。クリックすると、対応する div が表示され、他のすべてが非表示になります。ライブサイトはこちら。

現在のスクリプトは機能しますが、3 つではなく約 30 の div と対応するサムネイルがあり、クライアントは 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();
});
4

2 に答える 2

1

anchorこれには、div 'カルーセル' のchildren( ) のクリック イベントを使用することをお勧めします。divクリックすると、まず'content' 内のすべての要素 ( ) を非表示にしますdiv。次に、' this' オブジェクトを使用して、クリックされたアンカーのインデックスを取得します。その後、そのインデックスを使用して、現在の div を表示します。ここでは、インデックスが両方を接続する 1 つのものであることがわかります。したがって、両方で同じ順序を維持する必要があります。

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/

于 2013-02-26T05:18:13.603 に答える
0

使用できます.siblings()：

$('.carousel a').click(function() {
    $('.content div').eq($(this).index()).show().siblings().hide();
});
于 2013-02-26T03:54:36.043 に答える