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

Posted 2023-02-21

【中文标题】jquery 只切换一个元素而不必使用 id

【英文标题】：jquery only toggle one element without having to use ids

【发布时间】：2011-04-04 20:56:05

【问题描述】：

我的页面上有多个具有相同类的 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') 但这也不起作用。

有什么帮助吗？

【参考方案1】：

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

$(文档).ready(函数() $('.file').hide(); $('a.toggle').click(function() $('div.file', this.parentNode).slideToggle(1000); $(this).text($(this).text() == 'show' ? 'hide' : 'show'); 返回假； ); );

【讨论】：

您需要在其中再添加一个.parentNode，因为div.file 只会与后代匹配，并且它是this.parentNode 的兄弟姐妹。 $('div.file', this.parentNode.parentNode)

【参考方案2】：

也许你可以试试这个：

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

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