Javascript 逐步显示每个div

我试图使这个脚本一步一步地显示我的div。当前代码仅在单击时显示所有div。如何让它检测div并一步一步地显示。例如：第一次单击=>Expanddiv用于步骤1，第二次单击=>Expanddiv用于步骤2。之后，如果div全部展开，则单击按钮时，隐藏所有div

TQ

第一步
步骤2
var qqcounter=1；
var-maxstep=3；
$（“#步骤btn”）.text（“显示步骤”+qqcounter）；
$（“#stepshow”）.hide（）；
$（“#stepbtn”）。单击（函数（）{
qqcounter++；
if（qqcounter

它不起作用，因为您有相同的ID“stepshow”，您应该将其更改为smth，如“stepshow\u 1”，例如：

$('btn').click(function(){

    $('#stepshow_'+counter).show();
    counter++;

});

---

这里是fiddle，它不起作用，因为您有相同的ID“stepshow”，您应该将其更改为smth，如“stepshow_1”，例如：

$('btn').click(function(){

    $('#stepshow_'+counter).show();
    counter++;

});

这里是fiddle

html

<div id="stepshow1" class="stepshow">
            <h3>Step 1</h3>
        </div>
  <div id="stepshow2" class="stepshow">
            <h3>Step 2</h3>
        </div>
  <div id="stepshow3" class="stepshow">
            <h3>Step 3</h3>
        </div>

        <input type="button" id="stepbtn" />

第一步
步骤2
步骤3

剧本

var qqcounter = 0;
var maxstep = 4;
$("#stepbtn").text("Show step " + qqcounter);
$(".stepshow").hide();
$("#stepbtn").attr('value', 'Show step' + (qqcounter+1));
$("#stepbtn").click(function () {
    console.log(qqcounter);
    qqcounter++;
    if (qqcounter < maxstep) {
        $("#stepbtn").attr('value', 'Show step' + (qqcounter + 1));
        $('#stepshow' + qqcounter).slideDown();
    }
    else {
        $("#stepbtn").attr('value', 'Hide step');
        $(".stepshow").hide();
        qqcounter = 0;
    }
});

var qqcounter=0；
var-maxstep=4；
$（“#步骤btn”）.text（“显示步骤”+qqcounter）；
$（“.stepshow”）.hide（）；
$（“#stepbtn”）.attr（'value'，'Show step'+（qqcounter+1））；
$（“#stepbtn”）。单击（函数（）{
控制台日志（qqcounter）；
qqcounter++；
if（qqcounter

html

第一步
步骤2
步骤3

剧本

var qqcounter = 0;
var maxstep = 4;
$("#stepbtn").text("Show step " + qqcounter);
$(".stepshow").hide();
$("#stepbtn").attr('value', 'Show step' + (qqcounter+1));
$("#stepbtn").click(function () {
    console.log(qqcounter);
    qqcounter++;
    if (qqcounter < maxstep) {
        $("#stepbtn").attr('value', 'Show step' + (qqcounter + 1));
        $('#stepshow' + qqcounter).slideDown();
    }
    else {
        $("#stepbtn").attr('value', 'Hide step');
        $(".stepshow").hide();
        qqcounter = 0;
    }
});

var qqcounter=0；
var-maxstep=4；
$（“#步骤btn”）.text（“显示步骤”+qqcounter）；
$（“.stepshow”）.hide（）；
$（“#stepbtn”）.attr（'value'，'Show step'+（qqcounter+1））；
$（“#stepbtn”）。单击（函数（）{
控制台日志（qqcounter）；
qqcounter++；
if（qqcounter

下面是一个如何显示/隐藏的示例：

jQuery:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

CSS:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

HTML:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

HTML:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

第一步
步骤2
步骤3
步骤4
步骤5
步骤6
下一步
后退一步

下面是一个如何显示/隐藏的示例：

jQuery:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

CSS:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

HTML:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

HTML:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

第一步
步骤2
步骤3
步骤4
步骤5
步骤6
下一步
后退一步

那么如何在第一步中隐藏我的步骤呢？您可以使用部分选择器，如$（'div[id^=“stepshow”]”）隐藏步骤如何？如何定义“单击后隐藏步骤”将隐藏所有步骤？因此您需要一个接一个地隐藏步骤，就像您一直在显示它们一样？@Good.luck-我的版本已经这样做了（步骤2+有一个“后退”按钮），那么如何在第一步中隐藏我的步骤？您可以使用部分选择器，如$（'div[id^=“stepshow”]）隐藏步骤如何？如何定义“单击后隐藏步骤”将隐藏所有步骤？因此您需要一个接一个地隐藏步骤，就像您一直在显示它们一样？@Good.luck-我的版本已经做到了这一点（步骤2+的“上一步”按钮）谢谢你的例子，但我期待着一个更好的解决方案，因为我有很多步骤：）不用担心-试试上面的新方法：）谢谢，但我只想操作一个按钮。可能吗？我不知道你是什么意思？额外的“后退”和“下一步”按钮是一个boo-boo（一定是从jsfiddle:复制了太多）。如果你想要一个后退和前进按钮，没有一种方法只能有一个按钮。谢谢你的例子，但我期待着一个更好的解决方案，因为我有很多步骤：）不用担心-试试上面的新按钮：）谢谢，但我只想操纵一个按钮。可能吗？我不知道你是什么意思？额外的“后退”和“下一步”按钮是一个boo-boo（一定是从jsfiddle:复制了太多）。如果你想要一个“后退”和“前进”按钮，没有一种方法只需要一个按钮。