使用 jQuery 更改悬停时的文本

Question

我有一个 div，其中包含文本“one”。当您将鼠标悬停在它上面时，我想将文本更改为“二”，当您停止将鼠标悬停在它上面时，我想将文本更改回“一”。我尝试使用 jQuery 来做到这一点，但是在它变成“二”之后，一旦你停止将鼠标悬停在它上面，它就不会变回“一”。我做错了什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).replaceWith("two");
        }, function(){
        $(this).replaceWith("one");
    });
});
</script>

<p>one</p>

Answer 1

使用text()，因为replaceWith() 将替换整个元素，并且您将其替换为文本而不是元素，因此下次选择元素会丢失。

$(document).ready(function(){
    $("p").hover(function(){
        $(this).text("two");
        }, function(){
        $(this).text("one");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<p>one</p>

Answer 2

$(document).ready(function(){
    $("p").hover(function(){
        $(this).html("two");
        }, function(){
        $(this).html("one");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<p>one</p>