时间戳

首页 > 解决方案 > jquery下一个div元素选择

javascript - jquery下一个div元素选择

问题描述

我想通过另一个 div 中的按钮事件选择下一个 div 类 form_part 但它无法以某种方式工作我该如何解决这个问题。它在标题事件的同一 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>

标签： javascripthtmljquerycsscss-selectors

解决方案

问题是因为.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>

推荐阅读