Question

用户点击按钮1,2和最后的顺序3.用户点击按钮3 a＆＃34;恭喜＆＃34;弹出框，工作正常。

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

现在他们都保持蓝色，直到我点击按钮3.如何更改？

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

上面提供了小吃片段，但如果您愿意，可以使用FIDDLE。

Answer 1

你需要使用$（this）和如果你不会使用css数组只需使用.css（'background'，'gray'）;

$(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);
            });
          });
      }); 
    });

Answer 2

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

＆＃13;

$(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);
      });
    });
  });

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

以下是相关部分：

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

正在发生的事情是，当点击#button-1时，它会为点击#button-2时添加一个事件监听器，这会为#button-3的点击添加一个事件监听器，最终使所有.button是灰色的。您点击时不会将每个按钮设置为灰色。

解决方案：

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

每次点击它都会添加下一个按钮的监听器，并使本身灰色。 Demo

Answer 4

您可以像这样修改代码：

$('[id^="button"]').click(function () {
   $(this).css({background: 'grey'});
   if($(this).is('[id="button-3"]')){  
      $('#congrat-box').fadeIn(1200);
   }
});

Answer 5

此行$('.button').css({background: 'grey'});仅在按下此功能时执行：$('#button-3').click(function () {如果您希望每个按钮依次变为灰色，请将css类应用于每个点击事件所需的按钮，而不是仅在第3次点击活动。

Answer 6

$(document).ready(function() {

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

});

更改特定按钮的背景颜色

6 个答案: