將單個單擊事件綁定到多個按鈕時，如何使被單擊的按鈕做一件事，而其他所有按鈕做另一件事？

Question

我在ui-grid-b中有三個按鈕

<div class="ui-grid-b">
    <div class="ui-block-a"><button id="btnOvenA" style="width:100%" value="a">A</button></div>
    <div class="ui-block-b"><button id="btnOvenB" style="width:100%" value="b">B</button></div>
    <div class="ui-block-c"><button id="btnOvenC" style="width:100%" value="c">C</button></div>
</div>

每當單擊按鈕時，我都希望將其文本變為紅色。 我想將其他文本變成藍色。 我的點擊事件當前看起來像這樣：

$("#btnOvenA, #btnOvenB, #btnOvenC").click(function (event) {
   oven += $(event.target).attr('value');
   $(this).closest('div .ui-grid-b').css('color', 'blue');
   $(this).css('color', 'red');
});

沒用 我的想法是，在將被單擊的按鈕變成紅色之前，將所有按鈕都變成藍色，但是我不確定該怎么做。 我對第三行的想法是找到最接近類.ui-grid-b div，將它們全部變為藍色，然后將其單擊更改為紅色。

我知道一種方法是將每個按鈕分別設置為藍色，然后單擊為紅色，但是我希望在有100個按鈕的情況下也可以使用，並且我不想手動對每一行進行手動編碼。

有任何想法嗎？

Answer 1

您需要使用：

$(".ui-grid-b button").click(function (event) {
  $(".ui-grid-b button").not(this).css('color', 'blue');
  $(this).css('color', 'red');
});

工作演示

Answer 2

試試這個：您可以將ui-grid-b div中的所有按鈕設為藍色，並使單擊的按鈕變為紅色

$("#btnOvenA, #btnOvenB, #btnOvenC").click(function (event) {
   oven += $(event.target).attr('value');
   //make all button blue first
   $(this).closest('div.ui-grid-b').find('button').css('color', 'blue');
   //make clicked button red
   $(this).css('color', 'red');
});

JSFiddle演示

Answer 3

向所有人添加blue 。 將red專門添加到單擊的按鈕。

$("#btnOvenA, #btnOvenB, #btnOvenC").click(function (event) {
    $("[id^=btnOven]").not(this).css("color","blue");
    $(this).css("color","red");
});

注意-不確定代碼的執行情況。

字段-http: //jsfiddle.net/w0gqo6hs/