javascript - 在 ('mouseenter' )(this).显示特定 div 中的文本

Question

我一直在尝试不同的方法来完成这个任务，但都没有成功。基本上我一直在尝试的是，当我将鼠标悬停在“$this”(divOne, divTwo...) div 上时，div“writeToMe”中会弹出文本。花了几个小时，开始怀疑它的可能性，而不是进一步尝试......我想我会这样做。

我知道下面的 jquery 是无稽之谈，只是试图解释我想要做什么。

<div class="writeToMe"></div>  //on hover, show text within writeToMe

    $(document).ready(function() {

$(document).on('mouseenter', "divOne", function(){
    $(writeToMe).text("Today I ate a banana")
    })
$(document).on('mouseenter', "divTwo", function(){
    $(writeToMe).text("I fell on the stairs when I woke up")
    })
$(document).on('mouseenter', "divThree", function(){
    $(writeToMe).text("I slept")
    })
$(document).on('mouseenter', "divFour", function(){
    $(writeToMe).text("Today I woke up")
    })
    });

Answer 1

这就是你想要的吗？

$(".writeToMe").mouseenter(function() {
  var txt = null;
  switch (this.id) {
    case "divOne":
      txt = "Today I ate a banana";
      break;
    case "divTwo":
      txt = "I fell on the stairs when I woke up";
      break;
    case "divThree":
      txt = "I slept";
      break;
    case "divFour":
      txt = "Today I woke up";
      break;
  }
  if (txt)
    $(this).text(txt);
});

.writeToMe {
  border: 1px solid grey;
  min-width: 100px;
  min-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne" class="writeToMe"></div>
<div id="divTwo" class="writeToMe"></div>
<div id="divThree" class="writeToMe"></div>
<div id="divFour" class="writeToMe"></div>