有没有办法让这个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。