jquery - JQueryクリック+これが機能しない

Question

コードのスニペットをコピーしました。私はWeb言語に非常に慣れておらず、Javaのバックグラウンドを持っています。

JQueryは素晴らしいようですが、これを解決する方法がわかりません。

http://jsfiddle.net/MMf9Q/2/

ありがとうございました。

Answer 1

私はあなたがそれを期待していると思うようにあなたのフィドルを機能するように更新しました。

if / elseステートメントと単純に使用されるjQueryトグル機能（http://api.jquery.com/toggle/）を削除しました。オブジェクトを変換したいクラスを作成しました。これにより、コードがよりクリーンで整理された状態に保たれることがわかりました。

修正されたコード：http： //jsfiddle.net/MMf9Q/6/

jQuery：

    $('#clickme').click(function(){
        $(this).toggleClass('red');
    })  

Answer 2

Answers21241とiambriansreedには、あなたが達成しようとしたことを与える素敵な答えがあります。

しかし、あなたのコードについては、最初にいくつかアドバイスをしたいと思います。

まず、元のjavascriptコードは次のとおりです。

$('#clickme').click(function(){

    var color = this.css('background');

    if(color == '#cc0000'){
        this.css('background', '#00CC00');
    }else{
        this.css('background', '#CC0000');
    }
})​

$(function(){});1）ページの読み込み後にjqueryでコードを実行するには、コードをラップする必要があります。そうしないと、DOMが完全に読み込まれる前にJavaScriptコードが実行され、ほとんどの場合は機能しません。

$(function(){
    $('#clickme').click(function(){
        var color = this.css('background-color');
                    alert(color);
        if(color == '#CC0000'){
            this.css('background-color', '#00CC00');
        }else{
            this.css('background-color', '#CC0000');
        }
    });
});​

2）this.css()動作しません。.css()はjqueryオブジェクトの関数であり、この場合、これはjqueryオブジェクトではありません。$()任意のdom要素からjqueryオブジェクトを構築するには、それをラップする必要があります。

$(function(){
    $('#clickme').click(function(){
        var color = $(this).css('background-color');
        if(color == '#CC0000'){
            $(this).css('background-color', '#00CC00');
        }else{
            $(this).css('background-color', '#CC0000');
        }
    });
});​

3）色の値はあなたが与えたものとは異なるかもしれません。ブラウザは主に16進カラー値をRGB値に変換し、得られるものは異なります。alert(color);ある時点で価値を得て、それに応じてコードを変更してみてください。

$(function(){
    $('#clickme').click(function(){
        var color = $(this).css('background-color');
                    alert(color);
        if(color == '#CC0000' || color == 'rgb(204, 0, 0)'){
            $(this).css('background-color', '#00CC00');
        }else{
            $(this).css('background-color', '#CC0000');
        }
    });
});​

これが最後のフィドルです：

これは、何が悪かったのかを理解するのに役立ちます。その上、その方法はベストプラクティスではありません。トグルクラスを使用して、css内で要素のスタイルを設定します。Answers21241とiambriansreedは、それを行うための良い方法を提供しています。

Answer 3

$（this）を使用して、この要素にJQueryオブジェクトとしてアクセスします

$('#clickme').click(function(){

    var color = $(this).css('background-color');

    if(color == '#cc0000'){
        $(this).css('background', '#00CC00');
    }else{
        $(this).css('background', '#CC0000');
    }
})

Answer 4

いじる

http://jsfiddle.net/nTXPC/

CSS

.red {
 background:#CC0000;
}
.green {
 background:#00CC00;
}

HTML

<div id="clickme" class="red"> Click me </div>​

JS

$('#clickme').click(function(){

   $(this).toggleClass('red green');

});​

Answer 5

ゴードン、あなたのコードにはいくつかの問題がありました。this1つ目は、でラップする必要があるということです$()。それは#clickme要素を表しています。

第二に、あなたのバックグラウンドの要求は、あなたが期待していたものよりもはるかに詳細です。alert返される内容をconsole.logに記録して、ifステートメントが期待どおりに動作しない理由を調べることができます。ここに見られるように。

更新：更新されたアプローチは次のとおりです：

$('#clickme').click(function() {
    var color = $(this).css('backgroundColor');
    if(color == "rgb(0, 204, 0)") {
        $(this).css('backgroundColor', '#CC0000');
    }else{
        $(this).css('backgroundColor', '#00CC00');
    }
});​

Answer 6

他の人が言っているように、これではなく$（this）にする必要があります。また、パフォーマンスのために$（this）を別の変数に保存することをお勧めします。ここで行う必要はおそらくないでしょうが、特に何かをループしている場合は、それに入るのは良い習慣です。このようなもの：

$('#clickme').click(function(){

    var clickedElement = $(this);
    var color = clickedElement.css('background');

    if(color == '#cc0000'){
        clickedElement.css('background', '#00CC00');
    }else{
        clickedElement.css('background', '#CC0000');
    }
})​

Answer 7

こんな感じになります

$('#clickme').click(function(){

    var color = $(this).css('background-color');

    if(color == '#cc0000'){
        $(this).css('background-color', '#00CC00');
    }else{
        $(this).css('background-color', '#CC0000');
    }
})​;

Answer 8

thisの代わりに$（this）を使用してください。セレクターを表します。