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

看小提琴：

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

我会说@Pugazh 解决方案更清洁且更易于维护。