1.let关键字实现,每一次循环都是独立的作用域
<div class="nav"> 12
<button>赞(0)</button>
</div>
<script>
var div = document.querySelector('.nav');
var button = document.querySelectorAll('button');
div.innerHTML = '<button>赞(0)</button>'.repeat(100);
//str.repeat(n);是一个超级好用的字符串方法
var button = document.querySelectorAll('button');
for (let index = 0; index < button.length; index++) {
let num = 0;
button[index].onclick = function() {
num++;
this.innerHTML = `赞(${num})`;
}
//加了计数器,借助于独立的作用域
setInterval(function() {
button[index].onclick();
}, 1000)
};
2.闭包实现,超级好用
var button = document.querySelectorAll('button');
for (var index = 0; index < button.length; index++) {
var num = 0;
(function(num, index) {
button[index].onclick = function() {
num++;
this.innerHTML = `赞(${num})`;
};
setInterval(function() {
button[index].onclick();
}, 1000)
}(num, index));
};
3.自定义属性,这里没有用let关键字
var div = document.querySelector('.nav');
var button = document.querySelectorAll('button');
div.innerHTML = '<button>赞(0)</button>'.repeat(100);
var button = document.querySelectorAll('button');
for (var index = 0; index < button.length; index++) {
// button[index].index = index;这两句和下面的代码一个意思,开始往这边想的
// button[index].index = button[index].index - button[index].index;
button[index].index =0;
button[index].onclick = function() {
console.log(this.index);
this.index++;
this.innerHTML = `赞(${this.index})`;
}
};
好了 ,你还有什么方法,可以共同交流学习呀!