자바 스크립트 : 웹 사이트의 설명 상자를위한 onmouseover 기능

Question

전 컴퓨터 과학 (잠재적으로 유니에서 공부하는 것을 보면서)에 관해서는 아마추어이지만, 학생들을 겨냥한 과학 기사를 게시하기위한 웹 사이트를 만들기 위해 며칠 전에 결정했습니다 과학에 대한 관심을 키우기 위해 아이디어는 제가 작성한 모든 기사의 카탈로그 페이지에있을 때 제목에 마우스를 가져 가면 그 내용에 대한 설명을 읽을 수 있습니다. 이 설명 상자 아이디어가 절대적으로 필요한 것은 아니지만, 어제 한 상자 만 사용하여 어제 작업 했으므로 실망 스럽지만 이제는 다른 상자를 추가하고 깨진 글의 이름을 올바르게 지정하려고 시도했습니다. 나는 코드가 거칠다는 것을 알고 있지만 위대한 의견을 비판적으로 남겨 둘 수 있다면!

HTML

<p><a onmouseover="showbox('description')" onmouseout="hidebox('description')" 
href="Telomeres.html"> Title 1 </a></p> 
<div id="description"><p>Description of title 1</p></div> 


<p><a onmouseover="showbox('description2')" onmouseout="hidebox('description2')" 
href="index.html"> Title 2 </a></p> 
<div id="description2"><p>Description of title 2</p></div> 

자바 스크립트

function showbox('description'){ 
document.getElementById('description').style.display = 'block'; 
} 
function hidebox('description') 
{ 
document.getElementById('description').style.display = 'none'; 
} 




    function showbox('description2'){ 
document.getElementById('description2').style.display = 'block'; 
} 
function hidebox('description2') 
{ 
document.getElementById('description2').style.display = 'none'; 
} 

Answer 1

당신은 당신이 그것으로 ID를 통과하고 있기 때문에 상자를 보여주는 하나의 기능이 필요합니다. 함수의 괄호 안에있는 것은 전달되는 인자의 이름입니다. 그 함수 안에는 그 변수를 사용할 수 있습니다. 귀하의 경우 그래서, 당신이 이런 짓을 했을까 :

function showbox(nodeId){ 
    document.getElementById(nodeId).style.display = 'block'; 
} 

function hidebox(nodeId) 
{ 
    document.getElementById(nodeId).style.display = 'none'; 
} 

을 자바 스크립트 기능에 대한 추가 정보를 원하시면 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Answer 2

것 같다 당신이 함수 인수있는 것은 잘못 인용 부호를 가지고, 또한 별도의 두 가지를 할 필요가 없다

이

당신의 코드가 있어야한다 description1 및 description2 블록,

HTML

<p><a onmouseover="showbox('description')" onmouseout="hidebox('description')" 
href="Telomeres.html"> Title 1 </a></p> 
<div id="description"><p>Description of title 1</p></div> 


<p><a onmouseover="showbox('description2')" onmouseout="hidebox('description2')" 
href="index.html"> Title 2 </a></p> 
<div id="description2"><p>Description of title 2</p></div> 

JAVASCRIPT

function showbox(description){ 
    document.getElementById(description).style.display = 'block'; 
} 

function hidebox(description) 
{ 
    document.getElementById(description).style.display = 'none'; 
} 

데모 :이 도움이https://jsfiddle.net/mvvtLt8h/

희망!