有沒有辦法讓這個jQuery腳本動態？

Question

我正在使用此jQuery代碼來顯示和隱藏我的網頁上的div。正如你所看到的，我只限於5個div。有沒有辦法讓它們變成動態的？

$(document).ready(function() { 
    $('.box').hide(); 
    $('a.toggle').click(function() { 
    $('.box').toggle(400); 
    return false; 
    }); 
}); 

---

<a href="#" class="toggle" title="Show Comments"><img src="images/read.gif" alt="" /></a> 
<div class="box" class="comment">hidden content</div> 

這是我修改後的代碼

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).next('div.box').toggle(400); 
    }); 
}); 

---

<div class="entry"> 
    <h3>Title</h3> 
    <p>content</p> 
    <p class="posted">Posted by Admin<br /> 
    <a href="#" class="toggle"> 
    <img src="read.gif" alt="" /> 
    </a> 
</div> 
<div class="box" class="comment">Hidden</div> 

Answer 1

看着你的標記，你可以做這樣的事情：

$(document).ready(function() { 
    $('div.box').hide(); 

    $('a.toggle').click(function() { // all A elements with class 'toggle' 
    $(this).next('div.box').toggle(400); // toggle the next DIV with class 'box' 
    }); 
}); 

基本上綁定一個單擊處理與toggle類所有的鏈接，然後在單擊時，它會尋找下一個兄弟（相對於點擊鏈接）這是一個div與box類，使用Traversing/next功能。

用標記here檢查上面的例子。

編輯：我檢查了您的標記，你.toggle鏈接嵌套在div.entry元素裏面，也有一個未關閉的段落，所以我又調整了代碼，您的標記：

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).parents('.entry').next('div.box').toggle(400); 
    }); 
}); 

您會注意到我在尋找div.entry元素，因爲.box是它們的兄弟。

查看更新示例here。