javascript - 通过 jQuery 在鼠标悬停时更改按钮文本

Question

如果按钮文本是“已关注”并且用户将鼠标悬停在它上面我希望文本更改为“取消关注”并在用户停止悬停后变回“已关注”。

按钮:

{%if follow%}
<button type="submit" id="status" class="button" value="True"><span>followed</span></button>

{%else%}
<button type="submit" id="status" class="button" value="False"><span>follow</span></button>

{%endif%}

jQuery:

<script>
$(document).ready(function(){
    $(".button").click(function() {
        var status = $("#status").val();
        var course = $("#course").html()

        //SECTION THAT I'M HAVING TROUBLE WITH
        if ($(".button span").html() == "followed") {
            $(".button").mouseover(function() {
            $(".button span").html() = "unfollow";
            }
        }

        $.ajax({
            type: "POST",
            url: "/follow",
            data: 'status=' + status + "&course=" + course,
            success: function() {
$(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
$(".button").val($(".button").val() == 'True' ? 'False' : 'True');
}
        });
        return false;
    });
});
</script>

当我运行它时，我得到了

405 Method Not Allowed

The method POST is not allowed for this resource. 

但是当我删除鼠标悬停代码时，它起作用了。鼠标悬停代码有什么问题？

编辑:更新的 jQuery 现在可以在 onclick 代码之外使用 mouseout 运行:

if ($(".button span").html() == "followed") {
$(".button").mouseover(function() {
    $(".button span").html("unfollow");
});
$(".button").mouseout(function() {
    $(".button span").html("followed");
});
}

编辑:实际上，使用上面的代码，如果按钮是“已关注”并且我单击它，按钮文本仍然是“已关注”。我认为这是因为 mouseout 函数覆盖了将其更改为“follow”的 ajax success 函数。单击按钮后如何覆盖“已跟随”鼠标移出功能？

Answer 1

试试下面的，你错过了“)；”在你的鼠标悬停调用上，在那之后一切都很无聊......

//SECTION THAT I'M HAVING TROUBLE WITH
if ($(".button span").html() == "followed") {

    $(".button").mouseover(function() {
        // Pass the new string into .html()
        $(".button span").html("unfollow");
    });
}