jQuery : Open next DIV based on Current div element

Question

我的 HTML 结构如下所示。

<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
</div>
</div>
</dl>

我想，当文档准备好时，上面的结构被隐藏。点击元素(在文档中可用)后，上面的结构将显示，但只有第一个 div，它具有类 options。

注意:带有 some-options 类的 Div 包含不同的表单输入，如文本、单选、复选框等

那么如何执行单击按钮类 btn 来激活具有类 options 的父 div，并在单击当前激活的 div 上的下一个按钮后使用类 的下一个 div >选项 将启用。它将继续下去......直到选项 div 出现。

我已经累了。

$("#procced").click(function(){ 
    $("#steps").show();

    var i = 0;

});

jQuery 初学者需要一些指南才能实现这一点。

#procced 是 DOM 中的其他元素。我想像单击 #procced 时显示问题的 HTML 一样执行。我做了一些事情。 Next 不会显示整个结构，而只会显示第一个带有 .options 的 div 及其下一个按钮(显然)。然后单击 .btn 接下来将显示 .options。以前的内容将保留显示

Answer 1

$( document ).ready(function() {
  $( ".options" ).hide().first().show();
  
  $(".next").click(function(){ $(this).parents('.options').next().show();});
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>
</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
</div>
</div>
</dl>

你好，你可以这样做

首次演出

$( document ).ready(function() {
$("#procced").click(function(){ 
  $( ".options" ).first().show();});});

然后单击事件父选项 div 的按钮，您可以这样做

$(".btn").click(function(){ $(this).parents('.options').first().addClass("active") });

对于下一场演出，你可以做这样的事情

$(".next").click(function(){ 
   $(this).parents('.options').next().show();

请将“next”和“btn”点击事件放在document.ready括号中