ボタンをクリックするとボタンの色が変わります

Question

私は自分のページのボタンを一列に並べています。ボタンをクリックすると、ボタンの色を変更する必要があります。ここでは私のサンプルコードは

$("button.change").click(function() { 
 
    $(this).toggleClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button>

ここでそれが働いています。しかし、ここですべてのボタンをクリックすると、色が変更されました。ボタンが1つしかクリックされていない場合は、ボタンの色のみが変更され、残りのボタンの色はデフォルトになります。

Answer 1

すべてのボタンで選択したクラスを削除する必要があります（以前選択したボタンのスタイリングを消去します）。次にクリックしたクラスに適用します。また、ボタンには一意のIDを持たせる必要があります（clasはこの機能には十分です）。二重改行ではなくCSSでボタンを配置する必要があります。

$("button.change").click(function() { 
 
    $(".change").removeClass('selected'); 
 
    $(this).addClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white; 
 
    display:block; 
 
    margin: 1em; 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change">Click to change color</button> 
 
<button class="Button change">Click to change color</button> 
 
<button class="Button change" >Click to change color</button> 
 
<button class="Button change">Click to change color</button>

Answer 2

は、このjQueryのコードを試してみてください代わりに

$("button.change").click(function() { 
    $('button').removeClass("selected"); 
    $(this).toggleClass("selected"); 
}); 

これは、ある最初のすべてのボタンから.selectedクラスを削除し、クリックされたボタンだけにクラスを適用する何。

Answer 3

これは何か？

$("button.change").click(function() { 
 
    $("button.change.selected").removeClass("selected"); 
 
    $(this).toggleClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button>

Answer 4

まず、複数の要素に同じIDを使用しないでください。 IDは一意でなければなりません。

$('button.change').click(function() { 
    $(this).toggleClass('selected'); 
}) 

コードがところで正常に動作している、https://jsbin.com/sicifopizi/edit

Answer 5

上記の答えは非常に良い仕事。しかし、あなたは、あなたがそれを再度クリックボタンを無効にしたい場合は、参照

$("button.change").click(function() { 
 
    $(this).toggleClass("selected"); 
 
\t $("button.selected").not(this).removeClass("selected") 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button>

の下スニペット