Блог

Я пытаюсь отредактировать плагин WordPress с помощью jQuery. Я добавил кнопку в одну строку макета (.first-row) и пытаюсь использовать ее для переключения класса в строке ниже (.second-row).

Я не уверен, как это сделать — я пробовал использовать .closest для выбора второй строки и переключения класса, но, похоже, это не работает. Я также пытался использовать .next и .find , но безуспешно.

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

Вот мой пример JS Fiddle.

https://jsfiddle.net/v71sytLf/5/

HTML

 <div class="wrapper">
    <div class="upper-section"></div>
    <div class="lower-section">
        <div class="first-row"></div>
        <div class="second-row"></div>
    </div>
</div>

<div class="wrapper">
    <div class="upper-section"></div>
    <div class="lower-section">
        <div class="first-row"></div>
        <div class="second-row"></div>
    </div>
</div>
  

CSS

 .wrapper {
  position:relative;
  top:0;
  float:left;
  display:inline-block;
  width:275px;
  background:pink;
  margin-right:24px;
}

.upper-section {
  height:200px;
}

.first-row {
  height:55px;
  background:purple;
}

.second-row {
  height:55px;
  background:yellow;
}

.second-row.open {
  background:blue;
}

.button {
  position:absolute;
  display:block;
  right:0;
  background:orange;
}
  

jQuery

 jQuery(document).ready(function($) {    

  $(".first-row").append("<span class='button'>Button</span>");

  $(".button").click(function() {
    $(this).closest(".second-row").toggleClass("open");
  });

});
  

Прежде всего, вам нужно иметь кнопку DOM напрямую, чтобы упростить запуск действий. По соображениям доступности предпочитайте элемент как кнопку, которая что-то делает и ни на что не ссылается. Затем запустите относительно, используя родительский и следующий селекторы jQuery.

 <div class="wrapper">
<div class="upper-section"></div>
  <div class="lower-section">
    <div class="first-row">
      <button class="button">Button</button>
    </div>      
    <div class="second-row"></div>
  </div>
</div>

<div class="wrapper">
<div class="upper-section"></div>
  <div class="lower-section">
    <div class="first-row">
      <button class="button">Button</button>
    </div>
    <div class="second-row"></div>
  </div>
</div>
  

 jQuery(document).ready(function($) {    

  $(".button").click(function() {
    $(this).parent().next(".second-row").toggleClass("open");
    });
  
});
  

Вот обновленная скрипка: https://jsfiddle.net/0xq8w9sm/1 /