JavaScriptを使用してマウスオーバーでアクションを実行する

Question

私はJavascriptを使い慣れていないので、テキストを上に置いたときに指定した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＃上にカーソルを移動している場合。

Here's my JS fiddle so far

私はJavaScriptで解決策ではなく、jQueryのためにしてください探しています。

ありがとうございます！

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 Pまた、イベントをトリガされた要素を取得するためにevent.target.idを使用することができますrovides if...else

Answer 2

よりも優れた性能：

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ソリューションはしかしクリーナーや保守が容易であると言うでしょう。