0

我正在尝试使用 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”中的标签在每次单击时都会发生变化，从“详细信息”变为“隐藏”，反之亦然。

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

我在这里想念什么？

4

5 回答 5

3

试试这个： 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");;
    });
于 2012-10-08T02:01:13.303 回答
1

这应该工作 

 $("#details_button").html() == "Hide" ? $("#details_button").html("Details") : $("#details_button").html("Hide");;
于 2012-10-08T02:01:31.213 回答
1

这对我有用：

$(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/

于 2012-10-08T02:06:44.543 回答
1

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

于 2012-10-08T02:08:15.513 回答
1

只需更改以下行：

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

至：

var button_text = $("#details_button").html();
于 2012-10-08T02:08:38.347 回答