私は8つのJavaScript機能ボタンを有効/無効にするメニューを作成しました。同じJavaScriptコードを使用して8つのボタンすべてを機能させていますが、それらに異なるcssクラスを使用しているため、それらを機能させることができます。私の質問は、それぞれをクリックしたときに機能する場所にそれらを機能させるにはどうすればよいかということです。
Javascript コード: このコードを red1 red 2 so on green1 green2 so on でさらに 7 回使用しました。
// 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>
同じコードの red2 red3 などの 6 つのボタンがあります。