2回目のクリックで、 jQuery

Question

<div class="example"> 
Test 
</div> 

$('.example').click(function(){ 
$(this).css('color','red'); 
}); 

上記のコードをクリックすると、.cssが適用されます。今私が必要なのは、.exampleが再度クリックされると、前のコードを置き換えて、別のビットコード（$(this).css('color','blue');としましょう）を適用することです。

私は、この検索したとaskersは、ここでしか明らかにそうではありません.toggleで置換することができる.show/.hideイベントを、必要とするように見えます。

Answer 1

をブール値を維持し、設定が完了しています自体内exampleの各インスタンスの状態を維持することである。

は、2つのCSSクラス

.example { background:blue } 
.example.red { background:red } 

定義

その後、あなたのクリック方法：

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

あなたは多くのインスタンスを持っている場合は、新しいCSSクラスを定義したくない場合は、状態は、各.example内で排他的であることを確認するために、data()を使用することができ、これは便利です.exampleの

$('.example').click(function() { 
    var color = $(this).data('color'); 
    if(color != 'blue') { 
     $(this).css('color', 'blue'); 
     $(this).data('color', 'blue'); 
    } else { 
     $(this).css('color', 'red'); 
     $(this).data('color', 'red'); 
    } 
}); 

http://api.jquery.com/data/

Answer 2

<div class="example"> 
Test 
</div> 

ちょうどあなたがクラスexampleの多くのインスタンスを持っているかもしれないので、単純に単一の変数を使用した状態を維持することが、あなたが何ができるか、現実的ではありません。..

var isRed=false; 
$('.example').click(function(){ 
if(isRed) 
{ 
$(this).css('color','blue'); 
isRed=false; 
} 
else 
{ 
$(this).css('color','red'); 
isRed=true; 
} 
}); 

Answer 3

使用addClassとremoveClass

.blueColor 
{ 
background-color: blue; 
} 

.redColor 
{ 
background-color: red; 
} 

そして、あなたのjavascriptのaddClassとremoveClass機能で使用します。

<script> 

    $(document).ready(function(){ 
    $(".example").keypress(function() { 
    if($(".example").val().length > 0) 
    { 
     $(".example").addClass("redColor"); 
    } 
    else { 
     if($(".example").val().length == 0) 
    { 
    $(".example").addClass("blueColor"); 
    $(".example").removeClass("redColor"); 
    } 
    } 

    }); 
    }); 
    </script> 

Answer 4

を私はあなたが正確ので、私はフラグを残してdataメソッドを使用するためにあなたをお勧めしたいのクリックイベントについてのより一般的なものが必要と思い

$('.example').click(function() { 
    if (!$(this).data("custom-even")) { 
     // odd execution   
     $(this).data("custom-even", true) 
    } else { 
     // even execution 
     $(this).data("custom-even", false) 
    } 
});​ 

Answer 5

$('.example').click(function(){ 
    var theExample = $(this); 
    if(theExample.hasClass("clicked")){ 
     theExample.css('color','blue').removeClass("clicked"); 
    }else{ 
     theExample.css('color','red').addClass("clicked"); 
    } 
}); 

http://jsfiddle.net/SnDgh/

Answer 6

このようなものは、2つの色（またはスタイル）を切り替えるために機能します。

$('.example').click(function(){ 

    if($(this).css('color') == "red") 
    { 
     $(this).css('color','blue'); 
    } 
    else 
    { 
     $(this).css('color','red'); 
    } 
}); 

Answer 7

Hiyaは:) toggleでこれを試してみてください）http://jsfiddle.net/FVXAZ/

SOあなたのCSSでトグルを使用することができますし、毎秒クリックすると、副-その逆が影響しています。 :)

コード

$(function() { 
    $('.example').toggle(function() { 
    $(this).css('color','red'); 
    }, function() { 
    $(this).css('color','blue'); 
    }); 
    }); 

は、歓声を素敵な男の人を持っています！

Answer 8

これを試してみてください：

$('.example').click(function(){ 
     if($('.example').data('isAlreadyClicked')=='true') 
     { 
      $(this).css('color','blue'); 
      $('.example').data('isAlreadyClicked','false') 
     } 
     else 
     { 
      $(this).css('color','red'); 
      $('.example').data('isAlreadyClicked','true') 
     } 

}); 

Answer 9

は結合1回限りのイベントを処理するための方法は良い選択で使用し、しかし、このソリューションは、すべてのイベントが後に、このコードををバインドさ、それは矛盾を引き起こす可能性が停止します。

$('.example') 
    .one('click', function(e) { 
    e.stopImmediagePropagation(); 
    }) 
    .on('click', function() { 
    $(this).css('color', blue'); 
    }); 

Answer 10

多くの回答がすべて1つの解決策を定義しています。

基本的に2つの方法があります。言及されている他の方法は、パフォーマンスの低いか、または非対話的なものです（この種の解決策にはdataを使用するのは残酷です）。ここでは、2つの方法は、あなたが使用することができます：。。

// Toggle a class 'red' defined in your stylesheet 
$('.example').on('click', function() { 
    $(this).toggleClass('red') 
}) 

// Toggle the color with an "if" check 
$('.example').on('click', function() { 
    if (this.style.color === 'red') { // using jQuery is not required 
     this.style.color === 'blue' 
    } 
    else { 
     this.style.color === 'red' 
    } 
}) 

Answer 11

あなたは

$（ '＃IDは'）を切り替える（関数（）{

$（」。CSS'）CSSを書くことができます第二のクリック

$（ 'CSS '）/////////}

、関数（）{CSS（' 色'、（ '色'、 '赤'）。 'blue'）;} ）;