1

所以我得到了多个嵌入了不同图像的 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";
}
4

2 回答 2

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";
}

见小提琴：链接

于 2015-04-18T01:43:42.117 回答
0

尝试这个

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;
    }
}

你可以检查这个小提琴

于 2015-04-18T02:11:53.953 回答