jquery - 要素の背景プロパティをオーバーライドするクラスを追加する

Question

背景が灰色のボタンのリストがあり、ボタンがクリックされたときにボタンの背景色を青に変更したいと考えています。jQuery の「addClass」を試して、別の背景を持つクラスを追加しましたが、要素の背景 (既定のクラスで設定されている) をオーバーライドしません。既定のクラスを削除することもできますが、他のイベントを発生させるために使用されるため、保持する必要があります。

どうすればこれを行うことができますか (この方法で可能であれば)?

前もって感謝します！

Answer 1

デフォルトをオーバーライドするインライン css を使用できます。または、jQuery.addClass() で追加するクラスでは、!important; を使用します。つまり .btnCool{背景: 赤 !重要;}

Answer 2

Try this fiddle

Answer 3

これにはさまざまなバリエーションがある可能性があるため、おそらくいくつかのコード例を追加する必要がありますが、コードのほとんどがかなり標準的であると仮定した場合の答えは次のとおりです。

CSS スタイルには、使用するプロパティを決定するのに役立つ階層があります。

例：

.button{
   background: blue;
}
.button.clicked{
   background: red;
}

クリックされるボタンがある場合は常に、2 番目のルールが引数を獲得します。これは、1 つではなく2 つのクラスを使用して要素を参照するためです。

同じように、要素に色を 2 回設定し、1 回はそのクラスを使用して参照し、1 回は ID を使用すると、優先順位が高いため、ID 参照の下のルールが優先されます。