如何使用div元素的名称来赋值变量

因此，我得到了嵌入了不同图像的多个div。每个人都有其独特的名字属性。我试图通过更改图像源将悬停效果应用于每个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"; 
}

来源

2015-04-18 Sam Quinto

我会建议使用一类和你会使用'getElementsByClassName方法（）'，你也可以使用一个for循环应用事件监听器到每一个。 – NewToJS

您可以使用loop添加事件，并不需要为每个格指定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"; 
}

查看小提琴：Link

来源

2015-04-18 01:43:42

如果你想使用一个类来设置事件监听器，下面的源代码将起作用。

我有3个样本图像，所以变量Images现在成为一个对象数组。

图片[0]>图像[1]>图片[2]

this.src被用于靶向触发调用该函数的事件的元素。您可以访问其他属性，例如this.id。

function changeImage1(){ 
 
\t this.src="http://coded4u.com/SO/image2.jpg"; 
 
} 
 
function restoreImage1(){ 
 
\t this.src="http://coded4u.com/SO/image1.jpg"; 
 
} 
 
window.onload=function(){ 
 
\t var Images=document.getElementsByClassName('imgs'); 
 
\t for(var i=0; i<Images.length; i++){ 
 
\t \t Images[i].addEventListener('mouseover',changeImage1,false); 
 
\t \t Images[i].addEventListener('mouseout',restoreImage1,false); 
 
\t } 
 
}

/*Demo use*/ 
 
img{max-width:150px;}

<img class="imgs" src="http://coded4u.com/SO/image1.jpg"/> 
 
<img class="imgs" src="http://coded4u.com/SO/image1.jpg"/> 
 
<img class="imgs" src="http://coded4u.com/SO/image1.jpg"/>

如果您对这个回答任何问题，请在下面留言，我会尽快回复您。

我希望这会有所帮助。快乐的编码！

来源

2015-04-18 01:47:10 NewToJS

试试这个

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

您可以检查此fiddle

来源

2015-04-18 02:11:53

如何使用div元素的名称来赋值变量

回答

相关问题