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的链接，然后在单击它们时，它将查找下一个兄弟（相对于所点击的链接）使用Traversing/next函数的div box个.toggle。

使用您的标记here检查上述示例。

修改：我查看了您的标记，您的div.entry链接嵌套在$(function () { $('div.box').hide(); $('a.toggle').click(function () { $(this).parents('.entry').next('div.box').toggle(400); }); });元素中，还有一个未公开的段落，所以我调整了代码到你的标记：

div.entry

您会注意到我查找了{{1}}元素，因为.box是它们的兄弟。

检查更新示例here。

有没有办法让这个jquery脚本动态化？

1 个答案: