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上的下一个按钮，然后启用类别为options的下一个div。它将继续，直到打开。.直到div选项div出现为止。

我已经累了。

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

    var i = 0;

});

使用jQuery的初学者需要一些指导才能实现这一目标。

#procced is other element somewhere is DOM. I want to perform like when #procced is clicked question's HTML will show up. THat i did some how. Next is not whole structure will show but only first div with .options and its next button (obviously). Than click on .btn next .options will show up. previous will remain show

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();

请在document.ready括号中放置“ next”和“ btn” click事件

Answer 2

您可以执行以下操作：

    $( document ).ready(function() {
      //Assuming you need to perform on "procced" id click
        $("#procced").click(function(){ 
          $( ".options" ).each(function() {
           if(!$( this ).is(':visible')) {
             $( this ).show()
             break; //break the loop
           }
         });
     });
});

Answer 3

$("#procced").click(function(){    
     if($('#steps').is(":visible") == true)
        {
            $('#steps options').each(function(element){
               if($(element).is(":visible") == false)
               {
                  $(element).show();
                  break;
               }
           })
        }
});

jQuery：基于当前div元素打开下一个DIV

3 个答案: