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/

Answer 2

这是因为它总是用类文件隐藏所有div 这样做

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

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

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

2 个答案: