javascript - Javascript 使用 for 循环设置多个 onmouseover 事件

Question

抱歉，我是 javascript 新手，所以如果我的编码风格很奇怪，请指出

这是我所拥有的：

document.getElementById("img1-container").onmouseover = function(){increaseWidth(1)};
document.getElementById("img2-container").onmouseover = function(){increaseWidth(2)};
document.getElementById("img3-container").onmouseover = function(){increaseWidth(3)};
document.getElementById("img4-container").onmouseover = function(){increaseWidth(4)};

这是我试图将其转换为：

for(var i = 1; i <= numimages; i++){
        (function (i) {
            document.getElementById("img"+i+"-container").onmouseover = function(){increaseWidth(i)};
            document.getElementById("img"+i+"-container").onmouseout = decreaseWidth;
        })(i);
    }

我读过这个： 从一系列 onMouseOver 事件中创建一个循环

var numImages = 7;
var totalPercent = 100;
var increaseWidthPercent = 40;
var decreaseWidthPercent = Math.floor((totalPercent-increaseWidthPercent)/numImages);
var originalWidthPercent = Math.floor(totalPercent/numImages);

function increaseWidth(imgNum){
    document.getElementById("img"+imgNum+"-container").style.width = increaseWidthPercent + "%";
    for(var i = 1; i <= numImages; i++){
        if(i != imgNum){
            document.getElementById("img"+i+"-container").style.width = decreaseWidthPercent + "%";
        }
    }   
    return true;
}

function decreaseWidth(){
    for(var i = 1; i <= numImages; i++){
        document.getElementById("img"+i+"-container").style.width = originalWidthPercent + "%";
    }
    return true;
}

function setImageContainers(){  
    /*for(var i = 1; i < 8; i++){
        document.write("<p>document.getElementById(\"img"+i+"-container\").onmouseover = function(){increaseWidth("+i+")};document.getElementById(\"img"+i+"-container\").onmouseout = decreaseWidth;</p>");    
    }*/ 
    document.getElementById("img1-container").onmouseover = function(){increaseWidth(1)};document.getElementById("img1-container").onmouseout = decreaseWidth;

    document.getElementById("img2-container").onmouseover = function(){increaseWidth(2)};document.getElementById("img2-container").onmouseout = decreaseWidth;

    document.getElementById("img3-container").onmouseover = function(){increaseWidth(3)};document.getElementById("img3-container").onmouseout = decreaseWidth;

    document.getElementById("img4-container").onmouseover = function(){increaseWidth(4)};document.getElementById("img4-container").onmouseout = decreaseWidth;

    document.getElementById("img5-container").onmouseover = function(){increaseWidth(5)};document.getElementById("img5-container").onmouseout = decreaseWidth;

    document.getElementById("img6-container").onmouseover = function(){increaseWidth(6)};document.getElementById("img6-container").onmouseout = decreaseWidth;

    document.getElementById("img7-container").onmouseover = function(){increaseWidth(7)};document.getElementById("img7-container").onmouseout = decreaseWidth;
}

function setImageContainers2(){
    for(var i = 1; i <= numimages; i++){
        (function (i) {
            document.getElementById("img"+i+"-container").onmouseover = function(){increaseWidth(i)};
            document.getElementById("img"+i+"-container").onmouseout = decreaseWidth;
        })(i);
    }
}

window.onload = setImageContainers2;