切换目录的方法，涉及到循环内调用函数的变量的问题点击事件内的i的变化上面是两种比较简便的方法

90 阅读 0 评论 60 点赞

我是靠谱客的博主含糊季节，最近开发中收集的这篇文章主要介绍切换目录的方法，涉及到循环内调用函数的变量的问题点击事件内的i的变化上面是两种比较简便的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<title>显示</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<style type="text/css">
div{
display: none;
}
</style>
</head>
<body>
<input type="button" value="选项1" id="but1">
<input type="button" value="选项2" id="but2">
<input type="button" value="选项3" id="but3">
<input type="button" value="选项4" id="but4">
<div id="ch1" style="display: block;">选项1</div>
<div id="ch2">选项2</div>
<div id="ch3">选项3</div>
<div id="ch4">选项4</div>
<script type="text/javascript">
for(var i = 1; i <=4 ;i++){
(function(btn,divs){
var btn = $("#but" + i);
var divst = $("#ch" + i);
btn.on("click",function(){
for(var j = 1; j <= 5; j++){
var divs = $("#ch" + j);
divst.css("display","block");
divs.css("display","none");
console.log(divs);
}
})
})(i);
}
</script>
</body>
</html>

点击事件内的i的变化

for循环内的i进入点击函数后，直接结束循环，变成5需要通过其他方法改变，我使用了添加闭包的方法。用jq写原本准备写更少的代码，结果发现并没有简便。

<!DOCTYPE html>
<html>
<head>
<title>tab页切换练习</title>
<style type="text/css">
#tab div {
display: none;
}
#tab div.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<input type="button" class="btn" value="选项卡1">
<input type="button" class="btn" value="选项卡2">
<input type="button" class="btn" value="选项卡3">
<input type="button" class="btn" value="选项卡4">
<div class="content active">选项卡1的内容</div>
<div class="content">选项卡2的内容</div>
<div class="content">选项卡3的内容</div>
<div class="content">选项卡4的内容</div>
</div>
</body>
<script type="text/javascript">
// tab切换按钮列表
var btns = document.getElementsByClassName("btn");
// 内容div列表
var divs = document.getElementsByClassName("content");
// for (var i = 0; i < btns.length; i++) {
//
btns[i].index = i;
//
// i 是当前的索引
//
btns[i].onclick = function () {
//
// 1. 将div全部隐藏
//
for (var j = 0; j < divs.length; j++) {
//
divs[j].className = "content";
//
}
//
// 2. 将当前按钮对应索引的div显示
//
divs[this.index].className = "content active";
//
}
// }
for (var i = 0; i < btns.length; i++) {
// i 是当前的索引
btns[i].onclick = (function (index) {
return function () {
// 1. 将div全部隐藏
for (var j = 0; j < divs.length; j++) {
divs[j].className = "content";
}
// 2. 将当前按钮对应索引的div显示
divs[index].className = "content active";
}
})(i);
}
</script>
</html>