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');
});

<强> Working Demo

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 Demo

Answer 3

将blue添加到所有人。将red专门添加到点击的按钮。

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

注意 - 不确定代码的执行情况。

FIDDLE - http://jsfiddle.net/w0gqo6hs/

将单击事件绑定到多个按钮时，如何使单击的按钮执行一项操作而所有其他按钮执行另一项操作？

3 个答案: