单击按钮显示不同的文本,重复第一个文本
Click button show different text, repeat first text
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();
});
我想把它放在显示文本的地方,但在最后一个文本之后,它会重复第一个文本。
尝试制作类似的东西
如果有比使用JavaScript和HTML更好的方法,请告诉我。。但是JavaScript
和HTML
是我唯一能想到的方法,JS函数的替代方法是jQUERY
。帮助?;-;
也在寻找使用PHP
的建议,也许是为了模拟我试图使用不同语言重新创建的代码。
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;
}
});
<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>
使用模函数循环通过一组数字:(count%4)+1。如果计数从0开始,并随着每次点击下一个按钮而增加,则会在数字1、2、3和4之间循环。
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- 如何将键入的文本从一个输入类型的文本复制到另一个
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- RxJS油门行为;立即获取第一个值
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- 如何将文本从一个文本字段复制到其他文本字段
- 文本框和选择框组合单个文本中的值(第一个tb值,然后是sb值)
- 使用 javascript 获取文本框中输入的第一个值
- 如何使用Jquery选择第一个td元素及其文本
- 修改Angular中的第一个ng-options文本
- 使用脚本查找文本字符串,直到第一个html标记
- Javascript监听器将文本从第一个text_field添加到第二个text_field后转换为slug
- jQuery/JavaScript:如何删除第一个<李>除了<a>文本</a>
- 获得第一个n个文本字符的网页与他们的风格等