javascript - 使用 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”。

否则如果

如果我将鼠标悬停在#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>

附注: switch提供比 if...else

更好的性能