Question

我正在尝试使用jQuery在每次点击时切换按钮的标签。

以下是我实施的代码：

<html>
<head>
    <script src="jquery-1.8.2.js"></script>
    <script>
        $(document).ready(function(){

            $("#details_button").click(function() {
                var button_text = $("#details_button").attr("text");
                button_text == "Hide" ? $("#details_button").text("Details") : $("#details_button").text("Hide");
            });

        });
    </script>
</head>
<body>
    <button id="details_button" type="button">Details</button>
</body>
</html>

我希望“details_button”中的标签每次点击都会更改，从“详细信息”更改为“隐藏”，反之亦然。

但它只会更改一次，从“详细信息”更改为“隐藏”，然后在以后的点击中不会更改。

我在这里缺少什么？

Answer 1

试试这个：http://jsfiddle.net/rsnSx/ 或 http://jsfiddle.net/z7mrs/ 或 http://jsfiddle.net/dNzrq/

使用的API：

.html() - http://api.jquery.com/html/

.on - http://api.jquery.com/on/

希望它适合原因:)

<强>码

    $(document).on('click','#details_button',function() {

        var button_text = $(this).html();
        button_text == "Hide" ? $(this).text("Details") : $(this).text("Hide");;
    });

Answer 2

这应该有效

 $("#details_button").html() == "Hide" ? $("#details_button").html("Details") : $("#details_button").html("Hide");;

Answer 3

这对我有用：

$(document).ready(function() {
    $("#details_button").click(function(e) {
        var self = $(this); //cache object
        self.text(function () {
            var text = self.text();
            return text === 'Hide' ? 'Details' : 'Hide';
        });
        e.preventDefault();
        return false;
    });
});

工作小提琴：http://jsfiddle.net/TDr3Q/

这也可以缩短为：

$(document).ready(function() {
    $("#details_button").click(function(e) {
        $(this).text(function () {
            return $(this).text() === 'Hide' ? 'Details' : 'Hide';
        });
        e.preventDefault();
        return false;
    });
});

工作小提琴：http://jsfiddle.net/TDr3Q/1/

Answer 4

将$("#details_button").attr("text");更改为$("#details_button").text();

Answer 5

只需更改以下行：

var button_text = $("#details_button").attr("text");

到：

var button_text = $("#details_button").html();

使用jQuery切换Button的标签

5 个答案: