javascript - 如何更改 JavaScript 中按钮的颜色以应用于另一个函数？

Question

我正在尝试在 javascript 中创建一个按钮效果，以将其调用到另一个函数中。单击按钮时，它将显示另一种颜色，然后将返回其原始状态（颜色）。它确实可以:active在 css 中完成，但我无法将效果用于另一个函数。

该代码的最终用途是用于西蒙游戏项目，其中将随机创建玩家将跟随的序列。

我已经播放了声音并更改了每个按钮的颜色，但在单击后无法将按钮恢复到其原始状态（颜色）。

let blueBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
let redBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
let yellowBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
let greenBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');

// VARIABLES - DOM QUERIES

const btnBlue = document.querySelectorAll("#btnBlue");
const btnGreen = document.querySelectorAll("#btnGreen");
const btnRed = document.querySelectorAll("#btnRed");
const btnYellow = document.querySelectorAll("#btnYellow");

$(btnBlue).click(function() {
    $(this).css('background-color', '#00FFFF');
    blueBtnAudio.play();
    if($(btnBlue).css('background-color') == '#00FFFF'){
      $(btnBlue).css('background-color', 'blue')
    }
  });

标签： javascriptjquery

Answer 1

我想您希望按钮更改其颜色，然后在播放完声音后恢复其原始颜色？

您可以通过两种方式做到这一点，首先将按钮的原始颜色存储在变量中，然后更改其颜色并播放声音，最后设置 1 秒的超时时间，然后将按钮的颜色更改为其原始颜色，如下所示：

let blueBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
let redBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
let yellowBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
let greenBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');

// VARIABLES - DOM QUERIES

const btnBlue = $("#btnBlue");
const btnGreen = $("#btnGreen");
const btnRed = $("#btnRed");
const btnYellow = $("#btnYellow");

$(btnBlue).click(function() {
 var originalColor = $(this).css('background-color');
 $(this).css('background-color', '#00FFFF')
 var newColor = $(this).css('background-color');
 if (originalColor != newColor) {
     blueBtnAudio.play();
     setTimeout(function() {
  	   $(btnBlue).css('background-color', originalColor);
     }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnBlue">
btnBlue
</button>

或者您可以在音频结束播放时添加一个事件侦听器，然后将按钮应用其原始颜色（此解决方案更好，因为它取决于音频的长度，而不是我们在第一个解决方案中设置的手动超时）：

let blueBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
let redBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
let yellowBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
let greenBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');

// VARIABLES - DOM QUERIES

const btnBlue = $("#btnBlue");
const btnGreen = $("#btnGreen");
const btnRed = $("#btnRed");
const btnYellow = $("#btnYellow");

$(btnBlue).click(function() {
  var originalColor = $(this).css('background-color');
  $(this).css('background-color', '#00FFFF')
  var newColor = $(this).css('background-color');
  if (originalColor != newColor) {
     blueBtnAudio.play();
     blueBtnAudio.addEventListener('ended', function() {
      $(btnBlue).css('background-color', originalColor);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnBlue">
btnBlue
</button>