使用jQuery选择下一个div元素。

Question

我想通过按钮事件选择位于另一个div中的下一个class为form_part的div，但一些原因导致它无法正常工作。如何修复这个问题。在同一个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>

- Niraj Singh

---

请显示您尝试过的内容以及具体出了什么问题。将一个 可工作的示例 包含在您的问题中可能有所帮助，以演示该问题。 - showdev

$(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"); }); }); - Niraj Singh

请编辑问题以添加代码。不要将其放在评论中，因为几乎无法阅读。在这种情况下，我已经为您完成了。 - Rory McCrossan

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>

- Rory McCrossan