Question

我正在尝试创建一个按钮效果，该效果将在单击时更改其颜色，并在单击后返回其原始颜色。

我在按钮效果中设置了条件，以返回到其原始代码，但是它不起作用。这是下面的代码：

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 == '#00FFFF' ){
     $(btnBlue).stop();
   }
 });

Answer 1

这里不需要任何JS。您可以使用:active伪选择器单独使用CSS来做到这一点：

button {
  background-color: #CCC;
  border: 0;
  border-radius: 5px;
  padding: 10px 20px;
  outline: 0;
}

button:active {
  background-color: #C00;
  color: #EEE;
}

<button>Click me</button>

如何使用javascript和jquery创建按钮效果？

1 个答案: