jQueryを複数回クリックします

Question

自分自身でjQueryを教え始めましたが、クリックごとに何か異なることが起こる場合に、複数のクリック機能を追加する方法が不思議でした。

私がやろうとしています何の相続人一例

：私はそれは紫色に変化したテキストをクリックしたときに私はもともとだけなので、「紫」のラインを持っていた

$(document).ready(function() { 
$("#color").click(function() { 
$("#change_me").css("color", "purple"); 
$("#change_me").css("color", "black"); 
});//end color 
});//end doc ready 

。私は "黒い"行を追加して（デフォルトの色に戻す）、紫色の状態をバイパスします。

は、私は別のクリック機能を追加しようとしたが、それは

を動作しませんでした

Answer 1

あなたがクリックした後にしたいとのそれは追加/クラスを削除します]をクリックし、色を持つクラスを作成し、そのためのjQuery toggleClassを使用することができます

$(document).ready(function() { 
 
$("#color").click(function() { 
 
$("#change_me").toggleClass("purple"); 
 
//$("#change_me").css("color", "black"); 
 
});//end color 
 
});//end

.purple{ 
 
    color:purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="color"> 
 
<p id="change_me"> 
 
Click on the text to change its color 
 
</p> 
 
</div>

あなたは以上の2色の間で変更したい場合は、この

のようにそれを行うことができます

$(document).ready(function(){ 
 
    $("#change_me").toggle(
 
     function(){$("#change_me").css({"color": "purple"});}, 
 
     function(){$("#change_me").css({"color": "black"});}, 
 
     function(){$("#change_me").css({"color": "green"}); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div id="color"> 
 
<p id="change_me"> 
 
Click on the text to change its color 
 
</p> 
 
</div>