jQuery的：有很多項目只顯示DIV這個錨的點擊

Question

首先：對不起，我的英語

我有這樣

<div class="item"><div class="details"> 
<ul> 
<li><a href="#">Show div 1</a></li> 
<li><a href="#">Show div 2</a></li> 
<li><a href="#">Show div 3</a></li> 
</ul> 
<div>div 1</div> 
<div>div 2</div> 
<div>div 3</div>   </div></div> 

重要網頁：我有幾個div的叫'項目'。

我有這樣的jQuery腳本

$(document).ready(function() { 
    $('ul > li > a').each(function(index) { 
    $(this).click(function() { 
    $('.details > div:eq(' + index + ')').toggle() 
    .siblings('.details > div').hide(); 
    }); 
    }); 
}); 

，但如果我點擊「A」它讓我對所有項目的相對「格」。 像我喜歡，如果我點擊第一個元素的第一個「a」，它顯示了第一個唯一項目的第一個'div'，而不是所有的項目。

這是一個測試頁面link text （：O！它只能與第一個div鏈接）

我希望已經明確..

感謝所有

Answer 1

編輯，哎喲！該指數搞亂起來，div:eq(' + index + ')一直在尋找的第一個項目div的第一，第二和第三個元素，試試這個：

$(document).ready(function() { 
    $('ul > li > a').each(function(index) { 
    $(this).click(function() { 
     $(this).closest('.item').siblings().find('.details > div').hide(); 
     $('.item .details div:eq(' + index + ')').toggle(); 
    }); 
    }); 
}); 

並嘗試引入一個簡單的解決方案，如@戴夫比爾。

Answer 2

如果您可以將類屬性添加到div和鏈接。

<div class="item"><div class="details"> 
<ul> 
<li><a href="#" id="div1">Show div 1</a></li> 
<li><a href="#" id="div2">Show div 2</a></li> 
<li><a href="#" id="div3">Show div 3</a></li> 
</ul> 
<div class="div1">div 1</div> 
<div class="div2">div 2</div> 
<div class="div3">div 3</div>   </div></div> 

然後，你的jQuery可以很簡單的：

$(document).ready(function() { 
    $('ul > li > a').click(function(){ 
      $('#details > div').hide(); // hide all of the divs 
      $('div.' + this.id).show(); // then show the one with the same class as the link.id that was clicked 
     }); 
    });