자바 스크립트를 사용하여 mouseover에서 작업 수행 (다른 경우)

Question

자바 스크립트를 처음 사용하고 일부 텍스트를 마우스로 가리키면 지정된 div의 텍스트가 변경되는 코드를 작성하려고합니다. 내가 onMouseover와 활성화하고 그것은 다음과 같습니다 getElementById.innerHTML

를 사용하여 텍스트를 변경하는 기능을 작성했습니다

는 :

function changePhase() { 
 
    document.getElementById("phases").innerHTML = "Phase 1 Phase 1 Phase 1"; 
 
}

<div id="phases">yada yada yada yada yada yada</div> 
 

 
<p class="hoverhand" id="title1" onmouseover="changePhase()">PHASE 1</p> 
 
<p class="hoverhand" id="title2" onmouseover="changePhase()">PHASE 2</p> 
 
<p class="hoverhand" id="title3" onmouseover="changePhase()">PHASE 3</p> 
 
<p class="hoverhand" id="title4" onmouseover="changePhase()">PHASE 4</p> 
 
<p class="hoverhand" id="title5" onmouseover="changePhase()">PHASE 5</p>

또한 힙보다 제목이 나는 똑같은 일을하고 싶다.

<p class="hoverhand" id="title2" onmouseover="changePhase()">PHASE 2</p> 
<p class="hoverhand" id="title3" onmouseover="changePhase()">PHASE 3</p> 
<p class="hoverhand" id="title4" onmouseover="changePhase()">PHASE 4</p> 
<p class="hoverhand" id="title5" onmouseover="changePhase()">PHASE 5</p> 

내가하고 싶은 것은 IF 문과 동일한 함수를 사용하여 어떤 ID가 위에 놓여 있는지에 따라 텍스트를 변경하는 것입니다. (더 좋은 방법이 있다면 다른 방법을 사용하십시오)

예. # title2 위에 마우스를 올려 놓으면 #phases div에 "Phase 2 Phase 2 Phase 2"가 표시됩니다.

다른

나는 #phases의 DIV에 "3 단계 3 단계 3 단계"등 TITLE3 # 가리키면

경우. 나는 자바 스크립트가 아닌 jQuery를하십시오에서 솔루션을 찾고 있어요

Here's my JS fiddle so far

.

감사합니다.

Answer 1

호버 된 요소를 참조하려면 this을 사용하십시오. 다음은 간단한 예입니다.

function changePhase(obj) { 
 
    document.getElementById("phases").innerHTML = "You hovered " + obj.innerHTML; 
 
}

<div id="phases">yada yada yada yada yada yada</div> 
 

 
<p class="hoverhand" id="title1" onmouseover="changePhase(this)">PHASE 1</p> 
 
<p class="hoverhand" id="title2" onmouseover="changePhase(this)">PHASE 2</p> 
 
<p class="hoverhand" id="title3" onmouseover="changePhase(this)">PHASE 3</p> 
 
<p class="hoverhand" id="title4" onmouseover="changePhase(this)">PHASE 4</p> 
 
<p class="hoverhand" id="title5" onmouseover="changePhase(this)">PHASE 5</p>

업데이트 솔루션 사용자의 의견에 따라 :

function changePhase(obj) { 
 
    var txt = ""; 
 

 
    switch (obj.id) { 
 
    case "title1": 
 
     txt = "Apple"; 
 
     break; 
 
    case "title2": 
 
     txt = "Banana"; 
 
     break; 
 
    case "title3": 
 
     txt = "Mango"; 
 
     break; 
 
    case "title4": 
 
     txt = "Orange"; 
 
     break; 
 
    case "title5": 
 
     txt = "Grapes"; 
 
     break; 
 
    } 
 

 
    document.getElementById("phases").innerHTML = txt; 
 
}

<div id="phases">yada yada yada yada yada yada</div> 
 

 
<p class="hoverhand" id="title1" onmouseover="changePhase(this)">PHASE 1</p> 
 
<p class="hoverhand" id="title2" onmouseover="changePhase(this)">PHASE 2</p> 
 
<p class="hoverhand" id="title3" onmouseover="changePhase(this)">PHASE 3</p> 
 
<p class="hoverhand" id="title4" onmouseover="changePhase(this)">PHASE 4</p> 
 
<p class="hoverhand" id="title5" onmouseover="changePhase(this)">PHASE 5</p>

P.S :switch 페이지 또한 이벤트를 트리거하는 요소를 얻을 수 event.target.id을 사용할 수 있습니다 if...else

Answer 2

보다 rovides 더 나은 성능 :

function changePhase(){ 

var x = ""; 
switch(event.target.id){ 

    case "title1": 
    x = "Title1"; 
    break; 

    case "title2": 
    x = "Title2"; 
    break; 

    default: //you would follow the same logic used for the first two cases 
    x = "Default"; 

    } 
    document.getElementById("phases").innerHTML = x; 
} 

이것은 innerHTML이 무엇인지 지시하는 존재 조건문의 초기 요구 사항을 고려한다.

는 바이올린을 참조하십시오

https://jsfiddle.net/pehggpfk/1/

내가 @Pugazh 솔루션은 깨끗하고하지만 유지 관리가 쉽다는 것을 말할 것입니다.