在 jQuery 中使用 this 作为事件处理程序切换类

Posted

技术标签:

【中文标题】在 jQuery 中使用 this 作为事件处理程序切换类【英文标题】：Toggle classes with this as an event handler in jQuery 【发布时间】：2021-04-10 09:40:47 【问题描述】：

当我单击与之关联的可折叠类按钮时，我想独立切换内容类。我简要阅读了在事件处理程序中使用它的内容。到目前为止，我使用它的方式是切换可折叠类（即按钮）。

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title></title>
  <style>
    .collapsible 
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    
    
    .active, .collapsible:hover 
      background-color: #555;
    
    
    .content 
      padding: 0 18px;
      overflow: hidden;
      display: none;
      background-color: #f1f1f1;
    
  </style>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function()
      $(".collapsible").on("click", function()
        $(".content").toggle();
      );
    );
  </script>
</head>

<body>
  <button type="button" class="collapsible">Open Section 1</button>
  <div class="content contentDisp">
    <p>Hello There.</p>
  </div>
  <button type="button" class="collapsible">Open Section 2</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>
  <button type="button" class="collapsible">Open Section 3</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>

</body>

这接近我想要的，但不是切换按钮，而是我想在单击按钮时切换 div。

<script type="text/javascript" charset="utf-8">
        $(document).ready(function()
          $(".collapsible").on("click", function()
            $("this").toggle();
          );
        );
      </script>

【问题讨论】：

api.jquery.com/next 【参考方案1】：

您可以通过指定按钮的类名将this 与next() 结合使用。

$(document).ready(function()
  $(".collapsible").on("click", function()
    $(this).next('.content').toggle();
  );
);
    .collapsible 
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    
    
    .active, .collapsible:hover 
      background-color: #555;
    
    
    .content 
      padding: 0 18px;
      overflow: hidden;
      display: none;
      background-color: #f1f1f1;
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button type="button" class="collapsible">Open Section 1</button>
  <div class="content contentDisp">
    <p>Hello There.</p>
  </div>
  <button type="button" class="collapsible">Open Section 2</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>
  <button type="button" class="collapsible">Open Section 3</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>

</body>

【讨论】：

以上是关于在 jQuery 中使用 this 作为事件处理程序切换类的主要内容，如果未能解决你的问题，请参考以下文章

js 五 jquery的使用，调用

如何将事件处理程序绑定到 jQuery 中的实例？

jQuery得事件绑定

jQuery：如何在事件处理函数中获取事件对象而不将其作为参数传递？

在 jQuery 中使用 bind() 和 each() 分配事件处理程序的区别？

jQuery：将 $(this) 传递给命名函数事件处理程序