Javascript 单击按钮显示不同的文本，重复第一个文本 HTML:

我想把它放在显示文本的地方，但在最后一个文本之后，它会重复第一个文本

试着做一些像

如果有比使用JavaScript和HTML更好的方法，请告诉我。。但是

JavaScript

和

HTML

是我能想到的唯一方法，JS函数的替代方法是

jQUERY

。帮助

---

使用

PHP

寻找建议，也可能是为了模仿我试图使用另一组语言重新创建的代码。

使用模函数循环一组数字：（计数%4）+1。如果计数从0开始并随着每次单击“下一步”按钮而增加，则这将在数字1、2、3和4之间循环。

使用模函数在一组数字之间循环：（计数%4）+1。如果计数从0开始，并随着每次单击“下一步”按钮而增加，则这将在数字1、2、3和4之间循环。

var计数=0；
$（“#sliderNext”）。单击（函数（）{
计数++；
如果（计数<$（'.text'）。长度）{
$（“.text:n（“+count+”）.show（）.prev（）.hide（）；
}否则{
$（“.text:first”）.show（）；
$（“.text:last”）.hide（）；
计数=0；
}
});

下一个
这是第一个文本
这是第二个文本
这是第三个文本

这是四个文本
var计数=0；
$（“#sliderNext”）。单击（函数（）{
计数++；
如果（计数<$（'.text'）。长度）{
$（“.text:n（“+count+”）.show（）.prev（）.hide（）；
}否则{
$（“.text:first”）.show（）；
$（“.text:last”）.hide（）；
计数=0；
}
});

下一个
这是第一个文本
这是第二个文本
这是第三个文本

这是四个文本
这与php有什么关系？^^也许php可以用作更好的替代方案？尝试在java脚本中使用类的即时id。我用给定的代码创建了一个小提琴。它已经按照您的问题中的指定工作，在第四个文本之后循环回到第一个文本。那么，怎么了？如果不明显，您的小提琴对
#slider1next
的点击回调与您的问题完全不同。这与php有什么关系？^^也许php可以作为更好的选择？尝试在java脚本中使用类的即时id。我用给定的代码创建了一个小提琴。它已经按照您的问题中的指定工作，在第四个文本之后循环回到第一个文本。那么，怎么了？如果不明显，您的小提琴对
#slider1next
的点击回调与您的问题完全不同。一个确实不能像你的问题指定的那样工作。我将如何进行集成？
（计数%4）+1
将在1、2、3、4之间循环。除此之外，这似乎并没有真正回答这个问题（当然不是很好），除了很小的一部分。@Comradeo免责声明：我不知道JQuery。回答：将ID更改为幻灯片35;，其中#是1-4之间的数字。每次单击“下一步”按钮时增加计数。显示id=（计数%4）+1的。隐藏其他的。@Feathercrown示例？@Comradeo抱歉，我不知道JQuery，但我的想法的逻辑似乎是合理的。您可以在if语句中使用（计数%4）+1，并手动编程if语句块中元素的显示和隐藏。我将如何进行集成？
（计数%4）+1
将在1、2、3、4之间循环。除此之外，这似乎并没有真正回答这个问题（当然不是很好），除了很小的一部分。@Comradeo免责声明：我不知道JQuery。回答：将ID更改为幻灯片35;，其中#是1-4之间的数字。每次单击“下一步”按钮时增加计数。显示id=（计数%4）+1的。隐藏其他的。@Feathercrown示例？@Comradeo抱歉，我不知道JQuery，但我的想法的逻辑似乎是合理的。您可以在if语句中使用（计数%4）+1，并在if语句块中显示和隐藏元素时手动编程。
<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>

$("#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();
});