如何使用切换功能更改按钮文本 onclick答案

【问题标题】：How to change button text onclick with toggle function如何使用切换功能更改按钮文本 onclick
【发布时间】：2014-01-10 23:07:47
【问题描述】：

按钮：

<button type="submit" id="status" class="button" value="True"><span>followed</span></button>

jQuery:

<script>
$(".button").toggle(function() {
    $(this).val('followed');
}, function(){
    $(this).val('follow');
});
</script>

当用户单击按钮时，我希望它切换到其他值。但是现在当我运行代码时，按钮就会从页面上消失！这段代码有什么问题？

编辑：谢谢您的帮助。这是整个更新的 jQuery：

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

        //NEW SECTION that I'm having trouble with
        if ($(".button span").html() == "followed") {
            $(".button").on("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>

onclick 有效。然后我添加了新的 onmouseover 代码以将“followed”更改为“unfollowed”，当我运行它时，我得到了

405 Method Not Allowed

The method POST is not allowed for this resource.

onmouseover 代码有什么问题？

还有，

的作用是什么

return false;

?

【问题讨论】：

你需要设置点击事件。
@darkmango：取决于您使用的 jquery 版本。请在下面查看我的演示。您必须使用较新的版本。为此，您必须使用 1.8

标签： javascript jquery button

【解决方案1】：

WORKING EXAMPLE

$(".button").click(function() {
     $(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
});

【讨论】：

【解决方案2】：

由于您可能是 jQuery 新手，因此这里是其他人发布的内容的翻译，因为您/某人可能还不知道 ? : 运算符。：

$i = 1;

$(function () {
    $(".button").click(function () {
        if ($i === 0) {
            $(this).text("followed");
            $i = 1;
        } else {
            $(this).text("follow");
            $i = 0;
        }
    });
})

【讨论】：

谢谢。你能看出新的鼠标悬停代码有什么问题吗？（见编辑）

【解决方案3】：

Toggle 的意思是“显示或隐藏匹配的元素”。

你只需要监听点击事件：

$(".button").on("click", function() {
  $(this).html($(this).html() == 'follow' ? 'followed' : 'follow');
});

【讨论】：

.val 有效吗？还是必须是 .text 或 .html？
你说得对，复制粘贴他的代码，不要过多看那部分

【解决方案4】：

jQuery 切换显示或隐藏元素。您没有正确使用它。您应该改用.on('click', function() 或.click(function()。

此外，对于文本，您应该使用 .text() 或 .html() 来包含跨度标签，您的按钮中似乎有这些标签。

请参阅文档：http://api.jquery.com/toggle/

使用示例代码更新

// native element tags perform better than classname selectors
// so use button instead of .button
$('button').click(function () { 
    var text = 'follow';
    // save $(this) so jQuery doesn't have to execute again
    var $this = $(this).find('span');
    if ($this.text() === text) {
        $this.text('followed');
    } else {
        $this.text(text)
    }
});

见JSFiddle。

【讨论】：

toggle不是还有别的用法吗？ “将两个或多个处理程序绑定到匹配的元素，以在交替点击时执行。”编辑：没关系，它已“在 jQuery 1.8 中被弃用并在 jQuery 1.9 中被删除”。

【解决方案5】：

切换点击在较新的 jQuery api 中已被弃用。但旧的仍然有效。它最终被删除的原因是因为您使用的是较新的版本，这相当于淡入淡出切换。看看我使用 Jquery 1.8 的演示

<input type="button" onclick ="play" value="play"/>

 $("input[type='button']").toggle(function (){
       $(this).val("Pause");
    }, function(){
    $(this).val("Play");
});

DEMO

【讨论】：

【解决方案6】：

使用代码你可以得到解决方案：

只需创建函数sign_in_up(idElement)

JS：

  function sign_in_up(idElement) {
        var element = document.getElementById('element' + idElement);
        if (idElement === 1 || idElement === 2) {
            if (element.innerHTML === 'SIGN IN') element.innerHTML = 'SIGN UP';
            else {
                element.innerHTML = 'SIGN IN';
            }
        }
    }

HTML：

 <button onClick="javascript:sign_in_up(1)" ></button>    
 <div id="element1"> SIGN UP </div>

【讨论】：

【解决方案7】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $(this).text()==='Click me away!' ? $(this).text('i am clic') : $(this).text('Click me away!');
});
});
</script>
</head>
<body>


<button type="submit">Click me away!</button>
<button type="submit">Click me also</button>

</body>
</html>

【讨论】：