Question

按钮：

<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代码，将“follow”更改为“unfollowed”，当我运行它时，我得到了

405 Method Not Allowed

The method POST is not allowed for this resource.

onmouseover代码有什么问题？

此外，

的功能是什么

return false;

Answer 1

WORKING EXAMPLE

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

Answer 2

由于您可能是jQuery的新手，因为您/某人可能还不知道? :运营商，所以其他人发布的内容很少。

$i = 1;

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

Answer 3

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。

Answer 4

切换意味着“显示或隐藏匹配的元素。”

您只需要侦听点击事件：

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

Answer 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

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

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

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

7 个答案:

使用示例代码