for(var i=0;i<sDiv.length;i++){
alert(i);sDiv[i].onmouseover=function(){Content_Div[i].style.display="block";}我想把for循环里面的那个i传递到Content_Div[i]里面的这个i,但是这样子好像传递不进去求解答。。
alert(i);sDiv[i].onmouseover=function(){Content_Div[i].style.display="block";}我想把for循环里面的那个i传递到Content_Div[i]里面的这个i,但是这样子好像传递不进去求解答。。
例子:
function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + (++tmp));
}
bar(10);
}
foo(2)
for(var i=0;i<sDiv.length;i++){
sDiv[i].onmouseover=function(x){
return function(){Content_Div[x].style.display="block"}
}(i)
}1.这是循环和事件函数触发不一致(或者不同时)导致的。
2.可以简单地理解为当触发mouseover事件时,循环中的i已经改变了,至少变为sDiv.length-1。
3.而mouseover事件函数中用的i依然是外层for循环中的i函数中的i,实际上是外层函数(for所在函数中的i,代码块没有作用域)。
4.解决办法:闭包。
再试试下面这段代码:for(var i=0;i<sDiv.length;i++){
sDiv[i].onmouseover=function(){
alert(i);
//Content_Div[i].style.display="block";
}
}
i=1000;//假如最后一次修改i是这里。
alert(i);
sDiv[i].onmouseover=(function(e){
return function(){
Content_Div[e].style.display="block";//引用闭包原理,传入变量i给e
}
})(i)
}
for(var i=0;i<sDiv.length;i++){
alert(i);
sDiv[i].index=i;
sDiv[i].onmouseover=function(){
Content_Div[this.index].style.display="block";
}
this.style.display="block"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("img:gt(0)").hide();
});
function showImage(imgID) {
$("img").each(function () {
if ($(this).attr("id") == imgID) {
$(this).show();
} else {
$(this).hide();
}
});
}
</script>
</head>
<body>
<img src="images/icon-phone.gif" id="img1" />
<img src="images/close.gif" id="img2" />
<img src="images/data-table-th.gif" id="img3" />
<img src="images/icon-mail.gif" id="img4" />
<span onmousemove="showImage('img1')">第1张</span> <span onmousemove="showImage('img2')">
第2张</span> <span onmousemove="showImage('img3')">第3张</span> <span onmousemove="showImage('img4')">
第4张</span>
</body>
</html>不知道是不是你想要的效果
for(var i=0;i<sDiv.length;i++){
alert(i);
sDiv[i]["cacheData"] = i;
sDiv[i].onmouseover=function(){
var _tmp = this["cacheData"];
Content_Div[_tmp].style.display="block";
}
alert(i);
sDiv[i].onmouseover=function(j){
return function() {
Content_Div[j].style.display="block";
}
}(i);