jquery 只切换一个元素而不需要使用 ids

Question

我的页面上有多个具有相同类的 div。我希望能够单独切换它们。使用此脚本:

 $(document).ready(function() {
   $('.file').hide();

   $('a.toggle').click(function() {
      $('.file').slideToggle(1000);
      $(this).text($(this).text() == 'show' ? 'hide' : 'show');
      return false;
   });
 });

HTML 看起来像这样:

<div class="file-wrapper">
 <h5>(<a href="#" class="toggle">show</a>)</h5>
  <div class="file">
   <?php require "lipsum.php"; ?>
  </div><!-- .file -->
</div><!-- .file-wrapper -->

<div class="file-wrapper">
 <h5>(<a href="#" class="toggle">show</a>)</h5>
  <div class="file">
   <?php require "lipsum.php"; ?>
  </div><!-- .file -->
</div><!-- .file-wrapper -->

现在，如果我单击任一链接，它将切换页面上的两个 div(该页面最终将有最多 10 个可切换的 div。我知道我可以只向每个 div 添加 ID，但我不想为每个 id 编写一次 jquery 脚本。

我对 jquery 相当陌生，所以我确信有一个简单的方法可以做到这一点。我尝试过使用 .closest('div') 但这也不起作用。

有什么帮助吗？

Answer 1

也许你可以尝试一下:

$(this).parent('h5').next('div.file').slideToggle(1000);

编辑:这是一个示例:http://jsfiddle.net/6GRJr/