我有这种奇怪的情况，我不知道为什么输出的结果不是我期望的。这只是一个简单的for循环功能。有人可以解释一下为什么会这样吗？
var pm = 2;
for (var i = 0; i < pm; i++) {
$("#specialty_pm_"+i).mouseenter(function(){
alert(i);
});
};
我在我的html中有2个div，id="specialty_pm_<?php echo $countPM; ?>"并且该div位于php中的for循环函数中。foreach ($employee_info as $emp_info){ $countPM++; }我希望第一个div的悬停警报为“ 1”，第二个div的警报为“ 2”。但是当我将鼠标悬停在第一个div上时，它会提示“ 2”。
正如已经提到的，原因i是两个事件处理程序的范围都相同，因此对于两个事件处理程序而言，它的值都相同。
有两个解决方案可以解决此问题。
解决方案1：通过立即函数创建新作用域
var pm = 2;
for (var i = 0; i < pm; i++) {
$("#specialty_pm_"+i).mouseenter(function(instance){
return function() { alert(instance); };
}(i));
};
您可以在这里看到它的作用：http : //jsfiddle.net/LP6ZQ/
解决方案2：使用jQuerysdata方法存储值
var pm = 2;
for (var i = 0; i < pm; i++) {
$("#specialty_pm_"+i).data('instance',i).mouseenter(function(){
alert($(this).data('instance'));
});
};
您可以在这里看到它的作用：http : //jsfiddle.net/LP6ZQ/1/
解决方案3：bind事件处理程序的实例号
var pm = 2;
for (var i = 0; i < pm; i++) {
$("#specialty_pm_"+i).mouseenter(function(instance){
alert(instance);
}.bind(null,i));
};
您可以在这里看到它的作用：http : //jsfiddle.net/LP6ZQ/2/
解决方案3有一些警告-this被绑定为null，因此它不再像jQuery eventhandlers名义上那样可以用作对dom元素的引用。还bind没有被旧版本浏览器的支持，但是这可以通过usinga填充工具来缓解，好一个可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/功能/绑定
解决方案4：保持聪明，并使用委托而不是在循环中绑定事件处理程序
$(document.body).on('mouseenter','.specialty_pm',function(){
alert($(this).data('id'));
});
您可以在这里看到它的作用：http : //jsfiddle.net/LP6ZQ/4/
解决方案4是实现此目标的“正确方法”，但这将要求您更改构建标记的方法
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句