点击按钮显示不同的文字，重复第一个文字

Question

HTML：

<button id="slider1next" >Clickme</button>
  <p class="text" id="first_one">This is the first text</p>
    <p class="text" id="second_one" style="display:none">This is the second text</p>
    <p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>

的JavaScript：

$("#slider1next").click(function() {
    var $next = $(".text:visible").hide().next();
    $next.length ? $next.show() : $(".text:first").show();
});

$("#slider2next").click(function() {
    var $next = $(".text:visible").hide().prev();
    $next.length ? $next.show() : $(".text:last").show();
});

我想将它显示在显示文本的位置，但在最后一个文本之后，它会重复第一个文本。

尝试制作this

之类的内容

如果有更好的方法可以做到这一点，除了使用JavaScript和HTML之外，请告诉我。但JavaScript和HTML是我能想到的唯一方式，是JS的替代方案函数将是jQUERY。救命？ ; - ;

使用PHP寻找建议也许是为了模拟我想要使用不同语言集重新创建的代码。

Answer 1

使用模数函数循环遍历一组数字:( count％4）+ 1.如果count从0开始，则循环显示数字1,2,3和4，并且每次单击下一次都会增加按钮。

Answer 2

＆＃13;

＆＃13;

var count = 0;
$("#sliderNext").click(function() {
  count++;
  if (count < $('.text').length) {
    $(".text:nth(" + count + ")").show().prev().hide();
  } else {
    $(".text:first").show();
    $(".text:last").hide();
    count = 0;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="sliderNext">Next</button>

<p class="text" id="first_one">This is the first text</p>
<p class="text" id="second_one" style="display:none">This is the second text</p>
<p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>

＆＃13;

＆＃13;

＆＃13;