html代码:
<div id="t1">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<button>btn5</button>
</div>
js代码
$(function(){
var div = $("#t1");
for(var i=0,tmp;i<5;i++){
div.find("button:eq("+i+")").on("click",function(){
alert(i);
});
}
});
这个问题就是每次点击按钮应该弹出0,1,2,3,4
解决办法我知道的是使用闭包,代码如下:
$(function(){
var div = $("#t1");
for(var i=0,tmp;i<5;i++){
(function (b){
div.find("button:eq("+b+")").on("click",function(){
alert(b);
});
})(i)
}
});
bind的作用是改变函数的this指向,如果不使用这种方式还有其他解决方式么?
**不要在按钮上添加其他属性的方案以及类似的修改html的解决方案?
防止别人再回答关联到html、DOM元素上,就是闭包、bind、自执行函数问题**
我上次面试面试官问过bind可以解决这样的问题么?
面试官想要的答案应该是事件委托。
t1.addEventListener('click', e => {
if(e.target.nodeName === 'BUTTON')
alert(e.target.innerText)
})
bind除了可以传入绑定对象,还可以传入调用时的参数。
var btns = document.querySelectorAll('button');
function say(idx){
alert(idx);
}
for(var i=0;i<5;i++){
btns[i].onclick = say.bind(btns[i], i);
}
哎呀,答非所问的写了一波。
$(function(){
$("#t1 button").bind("click",function(){
var a=$(this).prevAll("button").length;
alert(a);
});
})
补2楼代码:
$(function(){
$("#t1").get(0).addEventListener('click',function(e){
if(e.target.nodeName === 'BUTTON')
alert(e.target.innerText)
})
})
<script>
$(function() {
var list = $("#t1").find('button');
list.each(function(i, e) {
e.onclick = function() {
console.log(i)
}
})
});
</script>