Question

我是Jquery的新手，我正在开发一些在线教程。在每个教程中，我希望每个阶段在您单击下一个按钮时逐个淡入，然后当您显示最后一个阶段时，下一个按钮应该隐藏，并且当单击时，新的下一个按钮会带您到下一个按钮教程。我正在使用id在我的HTML中分配段落。由于我在每个教程中执行了大量不同步骤的教程，因此我希望根据每个教程中的步骤数轻松更改此代码。我试图对此进行编码，虽然我的代码完成了我想要的代码，但它非常混乱且很长，我认为必须有一个更短的方法。这是我的HTML：

<div>
<p id="text1">Step one goes here</p>
<p id="text2">Step two goes here</p>
<p id="text3">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>

由于编辑：我只想使用HTML和Javascript

Answer 1

您可以使用public static String reverseWordByWord(String sentence) { StringBuilder result = new StringBuilder(); String[] words = sentence.split("\\s+"); // space(s) are the delimiters for (String word : words) { char[] charArray = word.toCharArray(); int iEnd = word.length() - 1; StringBuilder temp = new StringBuilder(); for (int i = iEnd; i >= 0; i--) { temp.append(charArray[ i]); } result.append(temp); result.append(" "); // separate the words } return result.toString().trim(); // remove the trailing spaces }查找id，查找以文字开头的ID。然后使用[id^="text"]检查是否需要淡入。如果有:hidden淡出，则在下一个教程中淡出。

＆＃13;

:first

＆＃13;

$('#nextstep').click(function() {
  if ($('[id^="text"]:hidden').length) {
    $('[id^="text"]:hidden:first').fadeIn();
  } else {
    $('#nexttut').fadeIn();
    $(this).fadeOut();
  }
})

＆＃13;

[id^=text],
#nexttut {
  display: none;
}

＆＃13;

Answer 2

有很多方法可以通过jQuery实现这一点，主要取决于你想要的“魔法”。

一个相当简单的策略是在步骤中创建一个名为stepNumber的全局变量和一个数据属性，如下所示：

var stepNumber = 1;

$(function(){
  $('p[data-step-id="' + stepNumber + '"]').show();
  
  $('#nextstep').click(function(){
    $('p[data-step-id="' + stepNumber++ + '"]').fadeOut();
    $('p[data-step-id="' + stepNumber + '"]').fadeIn();
  });
});

.step {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step" data-step-id="1">Step one goes here</p>
<p id="text2" class="step" data-step-id="2">Step two goes here</p>
<p id="text3" class="step" data-step-id="3">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>

这种方法与您的步骤结构完全无关 - 它们甚至不必按正确的顺序排列。此方法不需要您的步骤ID。

然而，

我们可以通过假设步骤是有序的来简化这一点。我们可以使用nth-child CSS选择器来查找下一步，我们可以将其与步数进行比较，看看我们是否应该再次显示Next Tutorial按钮。

与第一种方法一样，实际上并未使用步骤ID。

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

.step, #nexttut {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step">Step one goes here</p>
<p id="text2" class="step">Step two goes here</p>
<p id="text3" class="step">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>

在这两种情况下，我都给了一个常见的CSS类步骤，以便在Javascript中轻松识别它们。

Jquery一次淡出一个id

2 个答案: