顯示/隱藏相應div的Javascript旋轉木馬。 jQuery函數用於隱藏除選中的所有內容

我有一個帶圖像縮略圖的傳送帶。點擊時，它們顯示相應的div並隱藏所有其他的。 Live Site Here.顯示/隱藏相應div的Javascript旋轉木馬。 jQuery函數用於隱藏除選中的所有內容

當前的腳本工作，除了我有大約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(); 
});

來源

2013-02-26 stevenmorgan94

可你是你使用的庫告訴我們什麼？的jCarousel？ – arjuncc 2013-02-26 04:34:29

您可以使用.siblings()：

$('.carousel a').click(function() { 
    $('.content div').eq($(this).index()).show().siblings().hide(); 
});

來源

2013-02-26 03:54:36 Blender

我試過這個，它的作品除了無論我點擊哪個圖片只顯示div1並隱藏所有其他圖片。它不加載相同編號的div。我知道它很接近，但我不是jQuery專家。 – stevenmorgan94 2013-02-26 04:07:17

我建議，你用孩子的單擊事件（anchor）這個div'旋轉木馬'。單擊時，首先將所有元素（div）隱藏在「內容」div內。然後使用'this'對象獲取錨點的索引。之後，使用該索引來顯示相應的div。在這裏你可以看到索引是連接兩者的一件事。所以你必須保持同樣的順序。

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-26 05:18:13 arjuncc

顯示/隱藏相應div的Javascript旋轉木馬。 jQuery函數用於隱藏除選中的所有內容

回答

相關問題