logo标签列表

如何使用切换函数在单击按钮时更改按钮文本

javascriptjquerybutton
3

按钮：

<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;

?

1
您需要设置点击事件。 - Marko
@darkmango：根据你使用的jQuery版本不同，我的演示可能会有所不同。请参见下面的演示。你必须使用更新的版本才能使其正常工作。要使其正常工作，你必须使用1.8版本。 - Alex Shilman
7个回答
9

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;
        }
    });
})
谢谢。你能看出新的mouseover代码有什么问题吗？（请参见编辑） - mango
1

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

另外，对于文本，您应该使用.text()或.html()来包含span标签，它似乎在您的按钮中。

请参阅文档：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。
1
还有另一种使用方法吗 toggle？"将两个或更多的处理程序绑定到匹配的元素上，以在交替单击时执行。"编辑：没关系，它已经在jQuery 1.8中被“弃用”并在jQuery 1.9中被删除。 - user1766760
1

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

你只需要监听点击事件：

$(".button").on("click", function() {
  $(this).html($(this).html() == 'follow' ? 'followed' : 'follow');
});
.val 有用吗？还是必须使用 .text 或 .html？ - bozdoz
1
你是对的，复制粘贴他的代码时没有太注意那部分。 - dave
0
<!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>
0

在新版本的jQuery API中，已弃用了toggle click。但旧版本仍然可用。它被移除的原因是因为您正在使用更新版本，其等效于fade toggle。请查看我的演示，使用jQuery 1.8。

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

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

演示

0

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

只需创建函数 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接