如何使用 div 元素的名称分配变量

Question

所以我得到了多个嵌入不同图像的div。每个都有其唯一的名称属性。我正在尝试通过更改图像源将悬停效果应用于每个div。我不想编写多个脚本，而是尝试编写一个会影响每个div的脚本块。

<div id="div1" >
    <img id="img1" name="img1" src="img1_up.jpg" />
</div>
<div id="div2">
    <img id="img2" name="img2" src="img2_up.jpg" />
</div>...and so on

现在这是我目前拥有的用于翻转效果的脚本

<script>
    var var1 = document.getElementById("div1");
    var1.addEventListener("mouseover", changeImage1);
    var1.addEventListener("mouseout", restoreImage1);
    function changeImage1() {
        document.getElementById("img1").src = "img1_ro.jpg";
    }
    function restoreImage1() {
        document.getElementById("img1").src = "img1_up.jpg";
    }
    var var2 = document.getElementById("div2");
    var2.addEventListener("mouseover", changeImage2);
    var2.addEventListener("mouseout", restoreImage2);
    function changeImage2() {
        document.getElementById("img2").src = "img2_ro.jpg";
    }
    function restoreImage2() {
        document.getElementById("img2").src = "img2_up.jpg";
    }...and so on
</script>

我想使用每个图像的名称属性来创建应用于所有图像的动态代码。这是我的想法，但不确定确切的编写方式。请帮忙

...
var dynamicVar = ????
dynamicVar.addEventListener("mouseover", changeImage();
dynamicVar.addEventListener("mouseout", restoreImage();
function changeImage() {
    document.getElementById(dynamicVar).src = dynamicVar + "_ro.jpg";
}
function restoreImage() {
    document.getElementById(dynamicVar).src = dynamicVar + "_up.jpg";
}

Answer 1

您可以使用loop添加事件，无需为每个div 指定 id：

var inputs = document.getElementsByTagName("div");
for(var i = 0; i < inputs.length; i++) {    
    if(inputs[i].id.indexOf('div') >= 0) {
        inputs[i].addEventListener("mouseover", changeImage);
        inputs[i].addEventListener("mouseout", restoreImage);
    }
}
function changeImage(){
    var tmpStr = this.id;
    var divIndex = tmpStr.substring(3, tmpStr.length);
    document.getElementById("img" + divIndex).src = divIndex + "_ro.jpg";
}
function restoreImage(){
    var tmpStr = this.id;
    var divIndex = tmpStr.substring(3, tmpStr.length);
    document.getElementById("img" + divIndex).src = divIndex + "_up.jpg";
}

见小提琴：链接

Answer 2

试试这个

var parent = document.getElementById("parent");
var childs = parent.getElementsByTagName('div');
for (var i = 0; i < childs.length; i++) {
    (function () {
        var e = childs[i];
        e.addEventListener("mouseover", function () {
            changeImage(e);
        });
        e.addEventListener("mouseout", function () {
            restoreImage(e);
        });
    }());
}
function changeImage(element) {
    var imgs = element.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
        alert(imgs[i].id);
    }
}
function restoreImage(element) {
    var imgs = element.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].src = img_ro;
    }
}

你可以检查这个小提琴