javascript - jquery 下一个 div 元素选择

Question

我想通过另一个 div 中的按钮事件选择下一个 div 类 form_part，但它无法正常工作，我该如何解决这个问题。它在 header 事件的同一个 div 中工作正常。任何人都可以帮助谢谢。

$(document).ready(function() {
  $(".form_part").hide(); // Header event 

  $(".form_container h3").click(function() {
    $(this).next(".form_part").slideToggle();
  }); // Button event

  $(".form_container button").click(function() {
    $(this).parent(".form_part").next(".form_part").slideToggle();
    console.log("button clicked");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form_container">
  <div class="first_tab">
    <h3 class="form_heading">
      first tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum,
      </p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="second_tab">
    <h3 class="form_heading">
      second tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum dolor
      </p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="third_tab">
    <h3 class="form_heading">
      third tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum dolor sit ame
      </p>
    </div>
    <hr>
  </div>
</div>

Answer 1

问题是因为 .form_part 元素不是兄弟元素，所以 next() 不会返回任何内容来执行 slideToggle() 行动。

要更正此问题，您需要在 DOM 树中向上查找在 HTML 通用 HTML 结构之间属于同级元素的元素。在这种情况下，它将是 .N_tab 元素。您可以通过在每个上放置相同的类来简化它们的选择。在此示例中，我使用了 .tab。从那里您可以使用 next() 和 find() 来定位您想要切换的元素。试试这个:

jQuery($ => {
  $(".form_container h3").click(e => {
    $(e.target).next(".form_part").slideToggle();
  });

  $(".form_container button").click(e => {
    let $button = $(e.target);
    $button.closest('.form_part').slideToggle();
    $button.closest(".tab").next('.tab').find(".form_part").slideToggle();
  });
});

.form_part {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form_container">
  <div class="tab first_tab">
    <h3 class="form_heading">first tab</h3>
    <div class="form_part">
      <p>Lorem ipsum,</p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="tab second_tab">
    <h3 class="form_heading">second tab</h3>
    <div class="form_part">
      <p>Lorem ipsum dolor</p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="tab third_tab">
    <h3 class="form_heading">third tab</h3>
    <div class="form_part">
      <p>Lorem ipsum dolor sit ame</p>
    </div>
    <hr>
  </div>
</div>