Javascript 启用禁用图像按钮

这就是我要做的，是的，我在这个网站上到处寻找答案，但我还是迷路了。 我需要帮助的是，我正在为android和IOS（IPAD、IPHONE、ITOUCH）设备制作游戏菜单。 菜单上会有一个文本图像或纯文本图像。红色按钮为禁用，绿色按钮为启用，例如，如果红色按钮显示您可以在背景中听到音乐播放，如果单击它并显示绿色，则音乐将不再在游戏中播放。跳过功能也一样，这将启用/禁用这些功能。希望在javascript中实现这一点。任何建议都会很有帮助，谢谢

由于网站规则，我无法发布图片。我会把它写在菜单上。 图像=（红色）（绿色）

---

音乐（红色）（绿色）

跳过（红色）（绿色）

---

请参见此演示：

Javascript代码

function controls(id) {
    if (id == "play") {
        document.getElementById('play').setAttribute('disabled','disabled');
        document.getElementById('stop').removeAttribute('disabled','disabled');

        // You can define your play music statements here

    } else {
        document.getElementById('stop').setAttribute('disabled','disabled');
        document.getElementById('play').removeAttribute('disabled','disabled');

        // You can define your stop music statements here        
    }
}

    Music&nbsp;<button id="stop" onclick="controls(this.id)" disabled="disabled">Stop</button>&nbsp;<button id="play" onclick="controls(this.id)">Play</button>

function controls(className) {
    if (className == "red") {
        document.getElementById('PlayStop').setAttribute('class','green');
        document.getElementById('PlayStop').innerHTML = "Stop";
        // You can define your play music statements here
    } else {
        document.getElementById('PlayStop').setAttribute('class','red');
        document.getElementById('PlayStop').innerHTML = "Play";
        // You can define your stop music statements here        
    }
} 

    Music &nbsp; <button id="PlayStop" class="red" onclick="controls(this.getAttribute('class'))">Play</button>

HTML代码

function controls(id) {
    if (id == "play") {
        document.getElementById('play').setAttribute('disabled','disabled');
        document.getElementById('stop').removeAttribute('disabled','disabled');

        // You can define your play music statements here

    } else {
        document.getElementById('stop').setAttribute('disabled','disabled');
        document.getElementById('play').removeAttribute('disabled','disabled');

        // You can define your stop music statements here        
    }
}

    Music&nbsp;<button id="stop" onclick="controls(this.id)" disabled="disabled">Stop</button>&nbsp;<button id="play" onclick="controls(this.id)">Play</button>

function controls(className) {
    if (className == "red") {
        document.getElementById('PlayStop').setAttribute('class','green');
        document.getElementById('PlayStop').innerHTML = "Stop";
        // You can define your play music statements here
    } else {
        document.getElementById('PlayStop').setAttribute('class','red');
        document.getElementById('PlayStop').innerHTML = "Play";
        // You can define your stop music statements here        
    }
} 

    Music &nbsp; <button id="PlayStop" class="red" onclick="controls(this.getAttribute('class'))">Play</button>

编辑：

另一个带有单个按钮的解决方案：

演示：

#stop{
    background-color: red;
    border: 0px;
}

#play{
    background-color: green;
    border: 0px;
} 

Javascript代码

function controls(id) {
    if (id == "play") {
        document.getElementById('play').setAttribute('disabled','disabled');
        document.getElementById('stop').removeAttribute('disabled','disabled');

        // You can define your play music statements here

    } else {
        document.getElementById('stop').setAttribute('disabled','disabled');
        document.getElementById('play').removeAttribute('disabled','disabled');

        // You can define your stop music statements here        
    }
}

    Music&nbsp;<button id="stop" onclick="controls(this.id)" disabled="disabled">Stop</button>&nbsp;<button id="play" onclick="controls(this.id)">Play</button>

function controls(className) {
    if (className == "red") {
        document.getElementById('PlayStop').setAttribute('class','green');
        document.getElementById('PlayStop').innerHTML = "Stop";
        // You can define your play music statements here
    } else {
        document.getElementById('PlayStop').setAttribute('class','red');
        document.getElementById('PlayStop').innerHTML = "Play";
        // You can define your stop music statements here        
    }
} 

    Music &nbsp; <button id="PlayStop" class="red" onclick="controls(this.getAttribute('class'))">Play</button>

HTML代码

function controls(id) {
    if (id == "play") {
        document.getElementById('play').setAttribute('disabled','disabled');
        document.getElementById('stop').removeAttribute('disabled','disabled');

        // You can define your play music statements here

    } else {
        document.getElementById('stop').setAttribute('disabled','disabled');
        document.getElementById('play').removeAttribute('disabled','disabled');

        // You can define your stop music statements here        
    }
}

    Music&nbsp;<button id="stop" onclick="controls(this.id)" disabled="disabled">Stop</button>&nbsp;<button id="play" onclick="controls(this.id)">Play</button>

function controls(className) {
    if (className == "red") {
        document.getElementById('PlayStop').setAttribute('class','green');
        document.getElementById('PlayStop').innerHTML = "Stop";
        // You can define your play music statements here
    } else {
        document.getElementById('PlayStop').setAttribute('class','red');
        document.getElementById('PlayStop').innerHTML = "Play";
        // You can define your stop music statements here        
    }
} 

    Music &nbsp; <button id="PlayStop" class="red" onclick="controls(this.getAttribute('class'))">Play</button>

音乐播放

您应该提供一些代码来显示您目前所拥有的功能。不要期望社区为你做所有的工作。对不起，如果我让人觉得我需要有人来做这件事，我需要的只是帮助。谢谢你的回复阿桑·拉特霍德。这就是我要找的，至于红色和绿色的按钮。如果我把这两种颜色做成一个按钮会怎么样。单击红色（禁用）按钮时，变为绿色（启用）按钮的操作与两个底部相同。那我该怎么编码呢。一个按钮（2张图片）代替或红色（停止）绿色（播放）。谢谢-阿桑·拉托德你的生活saver@akamerc：如果您认为答案是可以接受的，则将其标记为接受答案。谢谢演示我有两个按钮，一开始是红色的，当你点击它们就会变成绿色。每个按钮都是红色（禁用）绿色（启用）的启用/禁用按钮。我们一直试图让它们正常工作，但当你点击第一个时，第二个变为绿色，但第二个工作正常。如何使它们正常工作。使用一个函数和嵌套的if-else语句，您可以实现以下目标：参见示例：