1

そのため、さまざまな画像が埋め込まれた複数の div を取得しました。それぞれに固有の名前属性があります。画像ソースを変更して、各 div にホバー効果を適用しようとしています。複数のスクリプトを書きたくありません。むしろ、すべての div に影響を与えるスクリプトのブロックを 1 つだけ記述しようとしています。

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

各画像の name 属性を使用して、すべての画像に適用する動的コードを作成したいと考えています。これは私が念頭に置いていることですが、正確な書き方はわかりません。助けてください

...
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 に答える