Блог

Главная - Вопросы по программированию - Переключайте классы с помощью этого в качестве обработчика событий в jQuery

Переключайте классы с помощью этого в качестве обработчика событий в jQuery

#javascript #html #jquery #dom

#HTML #jquery #это #переключение #jquery-мобильный-складной

Вопрос:

Я хочу переключать класс содержимого независимо, когда нажимаю связанную с ним кнопку сворачиваемого класса. Я кратко прочитал об использовании этого в обработчиках событий. То, как я использовал его до сих пор, в конечном итоге приводит к переключению класса collapsible (то есть кнопки).

 <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>

Комментарии:

1. 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>