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>

罗里·麦克罗森

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。