Найти следующий раздел по имени класса

Question

Как я могу показать следующий div с классом form_section, нажав .btn_next?

$(".form_section").hide();

$(document).on("click", ".btn_next", function(e) {
  $(this).next(".form_section").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form_section">
  <div>
    <div></div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>
<div class="row form_section">
  <div>
    <div></div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>
<div class="row form_section">
  <div>
    <div></div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>

Answer 1

сначала вам нужно скрыть текущий раздел ".form_section" (для кнопки, которая была нажата), затем получить следующий .form_section для отображения.

<script>

        //$(".form_section").hide();
        $(document).on("click", ".btn_next", function(e){
            $(this).parents('.form_section').hide();
            $(this).parents('.form_section').next().show();                
        }); 
    </script>

Answer 2

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

Для этого вы можно использовать комбинацию closest(), hide(), next() и show(). Попробуйте это:

$(document).on("click", ".btn_next", function(e) {
  $(this).closest('.form_section').hide().next(".form_section").show();
});

.form_section { display: none; }
.form_section:nth-of-type(1) { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form_section">
  <div>
    <div>1</div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>
<div class="row form_section">
  <div>
    <div>2</div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>
<div class="row form_section">
  <div>
    <div>3</div>
    <div></div>
    <button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
  </div>
</div>

Обратите внимание на использование CSS для скрытия / отображения соответствующих элементов при загрузке страницы. Это лучший подход, чем использование JS, поскольку он избегает FOU C.