我制作了一个带有 8 个启用/禁用 javascript 功能按钮的菜单，并且我使用相同的 javascript 代码来运行所有 8 个按钮，但为它们使用不同的 css 类，这样我就可以让它们工作。我的问题是，当您单击它们将起作用的每一个时，我如何才能让它们工作到哪里。
Javascript代码：我用这个代码再用了7次，red1 red 2 so on green1 green2 so on
// Left Menu function controls(className) {
if (className == "red") {
document.getElementById('Skip').setAttribute('class','green');
// You can define your play music statements here
} else {
document.getElementById('Skip').setAttribute('class','red');
// You can define your stop music statements here
} }
if (className == "red1") {
document.getElementById('Text').setAttribute('class','green1');
// You can define your play music statements here } else {
document.getElementById('Text').setAttribute('class','red1');
// You can define your stop music statements here } }
Css 代码：所有 8 个按钮 .red1 .red2 等 .green1 .green2 等的代码相同。
.red {
background: red;
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}
.green {
background: green;
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}
html代码：
Skip <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))">Play</button>
Text <button id="Text" class="red1" onclick="controls(this.getAttribute('class'))">Play</button>
以及另外 6 个具有相同代码 red2 red3 的按钮，依此类推。