當點擊不同的li時jQuery顯示li

Question

我有兩個列表 - 第一個列表中有一個名稱，大圖和說明，第二個列表是小縮略圖。當點擊縮略圖時，我需要相應的li，只有較大的圖像和文字纔會顯示。因此，如果單擊John Doe的縮略圖，我需要顯示較大的John Doe圖像和文本，並確保較大的Bob Doe和Tom Doe圖像和文本被隱藏。我還想在加載頁面時顯示第一個較大的圖像和說明。這是我的HTML和jQuery到目前爲止 - 謝謝！

<div id="bios"> 
     <ul> 
     <li> 
      <img src="../img/jd.jpg" alt="John Doe"> 
      <br> 
      <span class = "name">John Doe</span> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p> 
     </li> 

     <li> 
      <img src="../img/bd.png" alt="Bob Doe"> 
      <br> 
      <span class = "name">Bob Doe</span> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p> 
     </li> 

     <li> 
      <img src= "../img/td.png" alt="Tom Doe"> 
      <br>  
      <span class = "name">Tom Doe</span> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p> 
     </li> 

     </ul>  
</div> 
    <div id = "thumb"> 
     <ul> 
     <li> 

      <img src="../img/jdthumb.png" alt="John Doe"> 
      <br> 
      John Doe   
     </li> 


     <li> 

      <img src="../img/bdthumb.png" alt="Bob Doe"> 
      <br> 
      Bob Doe 

     </li> 

     <li>  

      <img src= "../img/tdthumb.png" alt="Tom Doe"> 
      <br> 
      Tom Doe 

     </li> 

    </ul> 
</div> 

的jQuery：

$("#bios li").first().css("display", "block"); 

    $("#thumb li").on('click', function() { 
     $("#bios li").css("display", "block"); 
     $(this).siblings('li').slideToggle(); 

    }); 

Answer 1

$("#thumb li").click(function() { 
    var pos = $(this).index(); 
    $("#bios li").hide(); 
    $("#bios li").eq(pos).show(); 
    $(this).siblings("li").slideToggle(); 
}); 

Answer 2

試試這個：

CSS

#bios > ul > li{ 
    display: none; 
} 
#bios > ul > li:first-child{ 
    display: block; 
} 

的JavaScript

$(function(){ 
    $('#thumb ul li').click(function(){ 
     var index = $(this).index(); 
     $('#bios ul li').hide(); 
     $('#bios ul li').eq(index).show(); 
    }); 
}); 

，這是你jsfiddle

Answer 3

Barmar的答案是偉大的，只要你願意永遠保持你的縮略圖和你的圖像之間的一對一一對應，並讓他們在相同的標記順序。如果沒有，我建議你配對的ID，例如，

<li id="img-john"> <!-- or use `img-1`, `img-2`, etc. --> 
    <img src="../img/jd.jpg" alt="John Doe"> 
    <!-- ... --> 
</li> 
<li id="img-bob"> 
    <img src="../img/bd.jpg" alt="Bob Doe"> 
    <!-- ... --> 
</li> <!- ... --> 

<!-- ... --> 

<li id="thumb-john"> 
    <img src="../img/jdthumb.jpg" alt="John Doe"> 
    <!-- ... --> 
</li> 
<li id="thumb-bob"> 
    <img src="../img/bdthumb.jpg" alt="Bob Doe"> 
    <!-- ... --> 
</li> <!- ... --> 

然後，你可以這樣做（未經測試）：

$("#thumb li").click(function() { 
    var id = this.id.replace("img", "thumb"); 
    $("#bios li").hide(); 
    $("#" + id).show(); 
    $(this).siblings("li").slideToggle(); 
});