jquery - 单击更改特定按钮的背景颜色

Question

用户依次点击按钮 1、2，最后是 3。用户点击按钮 3 后，会弹出一个“恭喜”框，效果很好。

当用户点击按钮 1 时，该按钮的背景应变为灰色，但按钮 2 和 3 仍应为蓝色。然后，当用户点击按钮 2 时，它应该变成灰色，就像按钮 1 已经是灰色而按钮 3 应该仍然是蓝色一样。然后，在用户点击按钮 3 后，所有按钮都应为灰色，并出现“恭喜”框。

现在它们都保持蓝色，直到我单击按钮 3。如何更改它？

$(document).ready(function() {

$('#button-1').click(function () {
    $('#button-2').click(function () {
        $('#button-3').click(function () {
            $('.button').css({background: 'grey'});
            $('#congrat-box').fadeIn(1200);
        });
    });
});
  
});

.button {
    height: 30px;
    width: 30px;
    border-radius: 12px;
    background: blue;
    color: gold;
    border: 1px solid white;
    box-shadow: 0 0 3px grey;
}
#congrat-box {
    background: orange;
    font-size: 24px;
    line-height: 50px;
    padding: 20px;
    text-align: center;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="button-1" class="button">1</button>
<button id="button-2" class="button">2</button>
<button id="button-3" class="button">3</button>
<div id="congrat-box">Congrats!!!</div>

上面提供了零食片段，但这里是 FIDDLE如果您愿意的话。

Answer 1

在每个按钮点击后添加 $(this).css({ background: 'grey' }); 使其变为灰色。也许是这样的:

$(document).ready(function() {

  $('#button-1').click(function() {
    $(this).css({
      background: 'grey'
    });
    $('#button-2').click(function() {
      $(this).css({
        background: 'grey'
      });
      $('#button-3').click(function() {
        $(this).css({
          background: 'grey'
        });
        $('#congrat-box').fadeIn(1200);
      });
    });
  });

});

.button {
  height: 30px;
  width: 30px;
  border-radius: 12px;
  background: blue;
  color: gold;
  border: 1px solid white;
  box-shadow: 0 0 3px grey;
}
#congrat-box {
  background: orange;
  font-size: 24px;
  line-height: 50px;
  padding: 20px;
  text-align: center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="button-1" class="button">1</button>
<button id="button-2" class="button">2</button>
<button id="button-3" class="button">3</button>
<div id="congrat-box">Congrats!!!</div>