Question

请帮帮我。我希望在“for loop”的帮助下在javascript编程中执行以下活动。

假设网页上有五张图片。当我翻转第一张图像时，文本应显示“它是第一张图像”。当我翻转第二张图像时，文本应显示“它是第二张图像”。当我翻转第三张图像时，文本应该显示它是第三张图像。

我已经尝试过但它很成功，但它是手动的。我是Javascript编程的新手..

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="style_latest.css" type="text/css"> 
<title>MATHERAN TRIP</title>


<style>

#displayText
{
    width:413px;
    height:auto;
    background-color:#666666;
    color:white;

}
#displayText1
{
    padding-left:5px;
}
</style>

</head>

<body>

<img src="images/img1.jpg" id="img1" onmouseover="clickEvent1()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img2.jpg" id="img2" onmouseover="clickEvent2()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img3.jpg" id="img3" onmouseover="clickEvent3()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img4.jpg" id="img4" onmouseover="clickEvent4()" onmouseout="imgRollout()" width="100" height="100"><br/>

<div id="displayText">
<span id="displayText1"></span>
</div>

<script>
var myData=new Array("Hi, How r u?", "Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up?", "Hello, whats going on?", "Hi friends")

document.getElementById("displayText").style.visibility='hidden';


function clickEvent1()
{   
    document.getElementById("displayText1").innerHTML=myData[0];
    document.getElementById("displayText").style.visibility='visible';
}

function clickEvent2()
{   
    document.getElementById("displayText1").innerHTML=myData[1];
    document.getElementById("displayText").style.visibility='visible';
}

function clickEvent3()
{   
    document.getElementById("displayText1").innerHTML=myData[2];
    document.getElementById("displayText").style.visibility='visible';
}

function clickEvent4()
{   
    document.getElementById("displayText1").innerHTML=myData[3];
    document.getElementById("displayText").style.visibility='visible';
}

function imgRollout()
{
    document.getElementById("displayText").style.visibility='hidden';
}

</script>

</body>
</html>

Answer 1

我建议你不要在每个元素中包含内联事件属性。但我会考虑在内联html5 data-属性中包含与元素相关联的消息：

<img src="images/img1.jpg" data-msg="Hi, How r u?" width="100" height="100">
<!-- etc -->

然后，您可以使用循环将相同的翻转函数绑定到每个元素，如下所示：

function doMouseOver(e) {
    document.getElementById("displayText1").innerHTML =
                                    e.target.getAttribute("data-msg");
    document.getElementById("displayText").style.visibility='visible';
}
function doMouseOut() {
    document.getElementById("displayText").style.visibility='hidden';
}

var imgs = document.getElementsByTagName("img"),
    i;
for (i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener("mouseover", doMouseOver);
    imgs[i].addEventListener("mouseout", doMouseOut);
}

在doMouseOver()函数中，e参数是event对象，因此e.target为您提供事件发生的元素的引用 - 所以你可以检索该元素的特定data-msg值以显示它。

演示：http://jsfiddle.net/3c7Rb/

话虽如此，你也不需要循环。您可以将函数直接绑定到document，然后在鼠标悬停处理程序中，您只需测试目标元素是否具有msg-data属性。如果是，则显示它，否则不执行任何操作：

function doMouseOver(e) {
    var msg = e.target.getAttribute("data-msg");
    if (msg) {
        document.getElementById("displayText1").innerHTML= msg;
        document.getElementById("displayText").style.visibility='visible';
    }
}
function doMouseOut() {
    document.getElementById("displayText").style.visibility='hidden';
}

document.addEventListener("mouseover", doMouseOver);
document.addEventListener("mouseout", doMouseOut);

演示：http://jsfiddle.net/3c7Rb/1/

使用for循环在javascript中进行多个图像翻转

1 个答案: