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」のラベルは、クリックするたびに「詳細」から「表示」に、またはその逆に変更されると思います。

ただし、「詳細」から「非表示」に1回だけ変更され、その後のクリックでは変更されません。

ここで何が欠けていますか?

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 に答える