Question

我运行一个教程网站，其中包含一个jQuery脚本，可以通过单击“下一步”按钮一次显示一条指令。按钮。当没有更多步骤时，代码会隐藏“下一步”＆＃39;按钮并显示＆＃39;下一个教程＆＃39;按钮。这是代码...

＆＃13;

var stepNumber = 1;
$(function() {
  $('p.step:nth-child(' + stepNumber + ')').show();
  $('#nextstep').click(function() {
    $('p.step:nth-child(' + stepNumber+++')').show();
    $('p.step:nth-child(' + stepNumber + ')').fadeIn();
    if (stepNumber == $('p.step').length) {
      $('#nextstep').hide();
      $('#nexttut').show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pad">
  <p class="step">
    1
  </p>
  <p class="step">
    2
  </p>
  <p class="step">
    3
  </p>
  <p class="step">
    4
  </p>
  <p class="step">
    5
  </p>
  <p id="nextstep"><a href="#!" role="button" class="btn btn-primary" title="Next Step">Next Step</a>
  </p>
  <p id="nexttut"><a href="#!" role="button" class="btn btn-primary" title="Next Tutorial">Next Tutorial</a>
  </p>
</div>

＆＃13;

此脚本可用于任意数量的步骤，而无需更改任何jQuery。

我的问题是它没有任何功能。我是jQuery的新手，我无法发现任何错误。你能吗？

Here is a fiddle

Answer 1

你最初必须隐藏所有.step。使用以下CSS来做到这一点。

.step{
    display: none;
}

完整代码

＆＃13;

var stepNumber = 1;

$('p.step:nth-child(' + stepNumber + ')').show();
$('#nextstep').click(function() {
  $('p.step:nth-child(' + stepNumber++ + ')').show();
  $('p.step:nth-child(' + stepNumber + ')').fadeIn();
  if (stepNumber == $('p.step').length) {
    $('#nextstep').hide();
    $('#nexttut').show();
  }
});

＆＃13;

.step{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pad">
  <p class="step">
    1
  </p>
  <p class="step">
    2
  </p>
  <p class="step">
    3
  </p>
  <p class="step">
    4
  </p>
  <p class="step">
    5
  </p>
  <p id="nextstep"><a href="#!" role="button" class="btn btn-primary" title="Next Step">Next Step</a></p>
  <p id="nexttut"><a href="#!" role="button" class="btn btn-primary" title="Next Tutorial">Next Tutorial</a></p>
</div>

＆＃13;

Answer 2

你需要在文档加载时隐藏div，（Credit：gdoron answer from）

 var stepNumber = 1;
$(document).ready(function(){
$('.step').hide();
});
$(function(){
    $('p.step:nth-child(' + stepNumber + ')').show();
    $('#nextstep').click(function(){
        $('p.step:nth-child(' + stepNumber++ + ')').show();
        $('p.step:nth-child(' + stepNumber + ')').fadeIn();
        if(stepNumber == $('p.step').length) {
            $('#nextstep').hide();
            $('#nexttut').show();
        }
    });
});
$(function() {
  $('p.step:nth-child(' + stepNumber + ')').show();
  $('#nextstep').click(function() {
    $('p.step:nth-child(' + stepNumber+++')').show();
    $('p.step:nth-child(' + stepNumber + ')').fadeIn();
    if (stepNumber == $('p.step').length) {
      $('#nextstep').hide();
      $('#nexttut').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pad">
  <p class="step">
    1
  </p>
  <p class="step">
    2
  </p>
  <p class="step">
    3
  </p>
  <p class="step">
    4
  </p>
  <p class="step">
    5
  </p>
  <p id="nextstep"><a href="#!" role="button" class="btn btn-primary" title="Next Step">Next Step</a>
  </p>
  <p id="nexttut"><a href="#!" role="button" class="btn btn-primary" title="Next Tutorial">Next Tutorial</a>
  </p>
</div>

一次显示一个步骤

2 个答案: