JQueryで色を動的に変更する方法は？

Question

ボタンを押したときに2つの色を動的に変更する方法はありますか？

Example: 
Press button = yellow 
Press button = red 
Press button = yellow 
Press button = red 
... 



$('button').click(function(){ 
    $(this).css('color', 'yellow'); 
    ... 
}); 

Answer 1

あなたがクラスを適用するか、変数にクリックされた状態を保持することにより、いずれか、状態を保持する必要があります。

$("button").on("click", function() { 
 
    $(this).toggleClass("red yellow"); 
 
});

.red { background-color: red; } 
 
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="red">click</button>

か、単に一つのクラス

$("button").on("click", function() { 
 
    $(this).toggleClass("yellow"); 
 
});

button { background-color: red; } 
 
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>click</button>

あなたは本当に（）を使用すると、状態の変数を保持するために必要以上の.css使用したい場合

クラス、最も簡単な解決策トグル

(function() { 
 

 
    var state = false; 
 
    $("button").on("click", function() { 
 
     state = !state; 
 
     $(this).css("backgroundColor", state ? "red" : "yellow"); 
 
    }).trigger("click"); 
 
    
 
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>click</button>

Answer 2

このようなものが多分あります。基本的には、現在の色である変数を設定しています。クリックするたびに色が切り替わります。 開始色が赤であるなら、あなたはvar yellowon = true;からvar yellowon = false;

var yellowon = true; 
$('button').click(function(){ 
    if (yellowon) { 
     $(this).css('color', 'red'); 
     yellowon = false; 
    } 
    else { 
     $(this).css('color', 'yellow'); 
     yellowon = true; 
    } 
    ... 
}); 

Answer 3

CSSの色はrgb形式で返されますに変更にラインを持っています。 あなたは、変更を行うために、この例を使用することができます。

$('button').click(function(){ 
 
    if ($(this).css('color') == 'rgb(255, 255, 0)') { 
 
    $(this).css('color', 'rgb(255, 0, 0)'); 
 
    } else { 
 
    $(this).css('color', 'rgb(255, 255, 0)'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button style="color: rgb(255, 255, 0)">Text</button>