1

私はjQueryの初心者で、少し楽しんでいます。クリックしたときにページの背景を変更し、ボタンのテキストを変更するボタンを作成しようとしています。必要なシナリオは 2 つだけです。 - ボタンに「1」と表示されている場合は、ボタンを「2」に変更し、背景を黒に変更します。- ボタンに「2」と表示されている場合は、ボタンを「1」に変更し、背景を白に変更します。

私のコードは最初のクリックで機能しますが、複数回クリックすることはできません。

私は何を間違えましたか？御時間ありがとうございます。

http://jsfiddle.net/6fRbM/7/

これは私のHTMLです

<body>
<button id="lumiere">1</button>
</body>

これは私のスクリプトです

$(function() {
    $('#lumiere').bind('click', function(event) {
        if ($('#lumiere:contains("1")')) {
            $('body').css('background-color', "black")
            $('#lumiere').html('2')
        }
        else if ($('#lumiere:contains("2")')) {
            $('body').css('background-color', "white")
            $('#lumiere').html('1')
        }
    }
    );
}
);
4

6 に答える 6

10

クエリが要素を返さなくても、jQuery オブジェクトが返されるため、if ステートメントは常に true を返します。代わりに「長さ」プロパティをチェックしてみてください:

$(function() {
    $('#lumiere').bind('click', function(event) {
        if ($('#lumiere:contains("1")').length) {
            $('body').css('background-color', "black");
            $('#lumiere').html('2');
        }
        else if ($('#lumiere:contains("2")').length) {
            $('body').css('background-color', "white");
            $('#lumiere').html('1');
        }
    });
});
于 2013-06-28T15:19:14.660 に答える
1

コードを少しリファクタリングする:

$(function() {
    $('#lumiere').click(function(event) {
        var $this = $(this);
        if ($this.text() === '1') {
            $('body').css('background-color', "black");
            $this.text('2');
        }
        else if ($this.text() === '2') {
            $('body').css('background-color', "white");
            $this.text('1');
        }
    });
});

最適化は次のとおりです。

  • bind()は古いので、on()代わりに使用してください
  • click()ショートカットを使用する
  • コールバック内で選択を繰り返す必要はありません。使用するだけですthis
  • Id セレクターが最速です。:contains フィルターを使用してこの機会を逃さないでください。
  • フィルターはあなたが思っていることをしていないので、まったく必要ありません。渡したパラメーターがequalではなく、テキストに含まれているかどうかをテストします。したがって、後者が必要な場合は、代わりに使用してください。text()
于 2013-06-28T15:22:32.223 に答える
1

そんなに複雑なことは必要ありません...

$(function() {
    $('#lumiere').bind('click', function(event) {
            var n = $('#lumiere').text();
            switch (n) {
            case '1':
                $('body').css('background-color', "black");
            $('#lumiere').text(2);
                break;
            case '2':
                $('body').css('background-color', "white");
            $('#lumiere').text(1);
                break;
            }            
    });
});
于 2013-06-28T18:22:15.457 に答える
0 
$(function() {
$('#lumiere').bind('click', function(event) {
     var v = parseInt($('#lumiere').text());

    if (v === 1) {
        $('body').css('background-color', "black")
        $('#lumiere').html('2')
    }
    else if (v === 2) {
        $('body').css('background-color', "white")
        $('#lumiere').html('1')
    }
}
);

} );

于 2013-06-28T15:19:48.290 に答える
0

このタスクにはVanilla JSを使用することをお勧めします。Vanilla JSの方がはるかに使いやすく、効率的です。

window.onload = function() { // if you place the script after the element,
                             // you can remove this line and the corresponding }
    document.getElementById('lumiere').onclick = function() {
        document.body.style.backgroundColor = this.firstChild.nodeValue == 1 ? "black" : "white";
        this.firstChild.nodeValue = 3-this.firstChild.nodeValue;
    };
};
于 2013-06-28T15:20:09.687 に答える