<body><div>123</div><div>456</div><div>789</div><script type="text/javascript">var doms = document.getElementsByTagName('div')for(var i =0; i < doms.length; i++){doms[i].onclick = function (){console.log(this.innerText)}}</script></body>
練習
幻燈片功能 gitee
// 都打印6，因為for循環在綁定click時，并沒有立即執行// 等綁定完，在循環外部觸發時，拿到的i是退出循環的結果
var thumbItem = document.getElementsByClassName('thumb-item')for(var i =0; i < thumbItem.length; i++){thumbItem[i].onclick = function (){console.log(i)}}
js1
var thumbItem = document.getElementsByClassName('thumb-item');
var sliderItem = document.getElementsByClassName('slider-item');for(var i =0; i < thumbItem.length; i++){(function (curI){thumbItem[curI].onclick = function (){for(var j =0; j < thumbItem.length; j++){thumbItem[j].className ="thumb-item"sliderItem[j].className ="slider-item"}this.className +=" cur"sliderItem[curI].className +=" active"}})(i)}
js2
;(function (){var Slider = function (opt){this.slider = document.getElementsByClassName(opt.sliderItem);this.thumbs = document.getElementsByClassName(opt.thumbItem);var _this =thisfor(var i =0; i <this.thumbs.length; i++){(function (curI){_this.thumbs[curI].onclick = function (){for(var j =0; j < _this.thumbs.length; j++){_this.thumbs[j].className ="thumb-item"_this.slider[j].className ="slider-item"}this.className +=" cur"_this.slider[curI].className +=" active"}})(i)}}Slider.prototype ={}window.Slider = Slider
})()
js3
;(function (){var Slider = function (opt){this.slider = document.getElementsByClassName(opt.sliderItem);this.thumbs = document.getElementsByClassName(opt.thumbItem);this.bindClick()}Slider.prototype ={bindClick: function (){var slider =this.slider,thumbs =this.thumbs;for(var i =0; i < thumbs.length; i++){(function (curI){thumbs[curI].onclick = function (){for(var j =0; j < thumbs.length; j++){thumbs[j].className ="thumb-item"slider[j].className ="slider-item"}this.className +=" cur"slider[curI].className +=" active"}})(i)}}}window.Slider = Slider
})()
