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;