通过jQuery更改鼠标悬停时的按钮文本答案

【问题标题】：Change button text on mouseover by jQuery通过jQuery更改鼠标悬停时的按钮文本
【发布时间】：2014-01-30 05:21:55
【问题描述】：

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

按钮：

{%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 函数覆盖了将其更改为“跟随”的 ajax 成功函数。单击按钮后如何覆盖“跟随”鼠标移出功能？

【问题讨论】：

$(".button span").html("unfollow"); 不要分配给html()，传递一个字符串。不确定这是否是您唯一的问题 - 405 错误似乎无关。也许它只响应 GET？
我认为远程资源不允许发布请求
远程资源问题是因为您从 FOLDER 获得响应，而不是 PHP 文件...

标签： javascript jquery

【解决方案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");
    });
}

【讨论】：

可能不是，大声笑，但我正在解决为什么当他删除代码时它会起作用并在他放入时中断。更重要的是，我正在回答他的问题：“有什么问题鼠标悬停代码？”
很好地抓住了迈克尔，没看到那个。 OP：我认为你有多个问题，正如 Louis、Michael 和我自己所指出的那样。既然我们已经解决了一些上述问题，最好仔细检查一下。
谢谢大家。我更新了代码。另外，附带问题 - “返回错误”的目的是什么？点击事件代码中的行？
当您从事件处理程序返回 false 时，它会阻止该事件的默认操作并阻止事件通过 DOM 冒泡。也就是说，就像 event.preventDefault 和 event.stopPropogation 一样......我相信还有 event.cancelBubble......
哦，等等，当前的代码实际上并没有完全按预期工作；有没有办法覆盖 mouseout 功能？还是错误是别的什么？（见编辑）

【解决方案2】：

$(document).ready(function(){
    $('#status').hover(function() {
        $(this).find('span').text('unfollow');
    }, function() {
        $(this).find('span').text('followed');
    });
});

希望这会有所帮助。 http://jsfiddle.net/sing0920/54yfg/

【讨论】：

【解决方案3】：

您应该尝试将 JavaScript 的使用限制在必要的时候。您可以通过常规 CSS 实现相同的目的。这是一个例子：

.button:hover .initialText, .hoverText {
    display: none;
}
.button:hover .hoverText {
    display: block;
}

还有 HTML：

<div class="button">
    <span class="initialText">Followed</span>
    <span class="hoverText">Unfollow</span>
</div>

【讨论】：