使用 Javascript 对鼠标悬停执行操作（否则如果）

Question

我是 Javascript 的新手，我正在尝试编写一些代码，当某些文本悬停在上面时，将更改指定 div 中的文本。

我编写了一个激活鼠标悬停并使用 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".

否则如果

如果我将鼠标悬停在#title3 上，#phases div 会显示 "Phase 3 Phase 3 Phase 3" 等等。

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 提供比 if...else

更好的性能

Answer 2

您还可以使用 event.target.id 获取触发事件的元素：

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 是什么。

查看fiddle：

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

我会说 @Pugazh 解决方案更干净，更易于维护。

使用 Javascript 对鼠标悬停执行操作（否则如果）

Do action on mouseover using Javascript (else if)

javascript

mouseover

onmouseover