for 루프로 자바 스크립트에서 다중 이미지 롤오버

-5

도와주세요. 나는 "for 루프"의 도움으로 자바 스크립트 프로그래밍에서 아래의 활동을하고 싶다.for 루프로 자바 스크립트에서 다중 이미지 롤오버

웹 페이지에 5 개의 이미지가 있다고 가정합니다. 첫 번째 이미지를 롤오버하면 텍스트에 "첫 번째 이미지"가 표시됩니다. 두 번째 이미지를 롤오버하면 텍스트에 "두 번째 이미지"가 표시됩니다. 세 번째 이미지를 롤오버하면 텍스트에 세 번째 이미지가 표시됩니다.

나는 그것을 시도했지만 성공했지만 수동이었다. 나는

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

출처

2014-07-06 Shyam Singh

를 시도? – nicael

Javascript를 처음 사용하면서 수동으로 시도했습니다. –

즉, 루프없이 완료했음을 의미합니다 ... –

내가 인라인 이벤트가 각 요소에 속성을 포함하지 않는 당신을 추천 할 것입니다 .. 자바 스크립트 프로그래밍에 새로운 오전.

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

내 :

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

그런 다음 다음과 같이 루프를 사용하여 각 요소에 동일한 롤오버 기능을 결합 할 수있다 :하지만 요소와 관련된 메시지와 함께 인라인 HTML5 data- 속성을 포함 고려할 것 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/

출처

2014-07-06 08:15:29 nnnnnn

for 루프로 자바 스크립트에서 다중 이미지 롤오버

답변

관련 문제