javascript - 连续的鼠标输入功能不起作用

Question

我的代码如下

$("#hammock").mouseenter(function(){

     $("#changingtext").replaceWith("<p>My text goes here</p>")

     $("#changingtitle").replaceWith("<h2>Making The Site Easy to Use</h2>")
});





$("#pointer").mouseenter(function(){

    $("#changingtext").replaceWith("<p>my text goes here</p>")

    $("#changingtitle").replaceWith("<h2>Do Not Click The Wrong Button</h2>")
});

如果我将鼠标悬停在 #hammock 上，它将起作用，但如果我随后转到 #pointer，则没有任何变化。虽然如果重新加载页面，#pointer 如果我先将鼠标悬停在它上面，它就会起作用。

我如何获得它，以便在将鼠标悬停在 #hammock 上后，我可以将鼠标悬停在 #pointer 上，它会更改文本？

Answer 1

这个:

$('#changingtext').replaceWith("<p>my text goes here</p>");

完全抹杀了以前称为“changingtext”的元素。随后，您尝试定位它并更新文本将会失败。

但是，您可以用共享其“id”的内容替换它:

$('#changingtext').replaceWith("<p id=changingtext>my text goes here</p>");

总是对您的代码进行一些实验是个好主意，可以利用浏览器调试器或简单地向您的代码添加 console.log() 调用代码。在这种情况下，这会向您表明您的“mouseenter”处理程序确实都在工作。