按钮上一个下一个点击-dom对象显示-代码简单-i累加给eq获取

2019独角兽企业重金招聘Python工程师标准>>>

HTML结构 

<div id="box1" style="">111</div>
<div id="box2" style="display:none">222</div>
<div id="box3" style="display:none">333</div>

<button class="pre">上一个</button>
<button class="next">下一个</button>

JS

<script type="text/javascript" src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
	$(function(){ 
		var i=0;
//		下一个
		var len=$("div").length;
		$(".next").click(function(){
			if(i>=(len-1)){
				alert("已经是最后一个了");
				return false;
			}
			i++;
			$("div").hide().eq(i).show();
		});
//		上一个
		$(".pre").click(function(){
			if(i<=0){
				alert("已经是第一个了");
				return false;
			}
			i--;
			$("div").hide().eq(i).show();
		});
	})
</script>

【思路】

1. 获取点击dom的个数；用来判断第一个和最后一个；索引从0开始；
2. 变量 i 根据每次点击动态累加或累减，然后传递给eq过滤器来让当前的 i 的dom显示；

【题外话】

tab切换和这个有类似之处，tab点击的菜单和内容展示是一 一对应的；所以只用获取到菜单的索引值即可；

而此例则是只有2个按钮，索引值就需要动态累加或者累减获取；

 

tab切换传送门：https://my.oschina.net/u/583531/blog/300665 猛戳！

转载于:https://my.oschina.net/u/583531/blog/1523698