3状态切换按钮答案

【问题标题】：3 state toggle button3状态切换按钮
【发布时间】：2017-06-12 00:53:58
【问题描述】：

我在使用按钮切换时遇到了一些问题，到现在为止我已经研究了 10 个小时，盯着我的屏幕。我用 3 个按钮进行了切换，以播放和暂停音频并再次播放。但问题是（顺便说一下，音频效果很好）。启动时直接显示“关闭”和“暂停”按钮。当单击两者之一时，会出现音频“打开”按钮。当点击这两个按钮时再次返回，这里是完整的脚本（除了音频播放部分，但已经有效）感谢您的所有帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
</script>

</head>

<body>

<img id="off" src="images/general/sound-off.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:hideShow('off'); javascript:showHide('pause'); javascript:playAudio()" alt="on">

<img id="on" src="images/general/sound-on.png" width="40" height="32" onClick="javascript:showHide('off'); javascript:showHide('pause'); javascript:hideShow('on'); javascript:pauseAudio()" style="display:none;" alt="off">

<img id="pause" src="images/general/sound-pause.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:hideShow('pause'); javascript:hideShow('off'); javascript:playAudio()" alt="on">


</body>
</html>

到目前为止这有效，但奇怪的是同时显示两个图像。

【问题讨论】：

如果我错了，请原谅我，并称其为“愚蠢”时刻之一，但您的 hideShow 和 showHide 函数不做完全相同的事情吗？

标签： javascript html

【解决方案1】：

首先，在我看来，您的两个函数正在做同样的事情。他们正在切换图像的display 属性。在这两种情况下，如果display 设置为''，它就会设置为'none'。如果display 设置为'none'，它会设置为''。

其次，我认为问题在于您正在切换它们。如果您只想一次显示一个，则需要将一个设置为显示，另外两个设置为隐藏。如果你只是每次都切换它们，那么隐藏的两个总是会同时变为显示。

我觉得应该更像这样：(sample)

<script type="text/javascript">
function hide(elementID)
{
    document.getElementById(elementID).style.display = 'none';
}

function show(elementID)
{
    document.getElementById(elementID).style.display = '';
}
</script>

<img id="off" src="images/general/sound-off.png" width="40" height="32" onClick="show('on'); hide('off'); playAudio();" alt="on">
<img id="on" src="images/general/sound-on.png" width="40" height="32" onClick="show('pause'); hide('on'); pauseAudio();" style="display:none;" alt="off">
<img id="pause" src="images/general/sound-pause.png" width="40" height="32" onClick="show('on'); hide('pause'); playAudio();" style="display:none;" alt="on">

【讨论】：

完美解决方案！这么简单，我想起来很难，非常感谢！它适用于 iphone、android、web 和所有 :-) phonegap 开发人员的小评论 :-)
很高兴听到它对您有用。因此，请mark it as your accepted answer.
请告诉我该怎么做？ Stackoverflow 的新手提问，我不知道我需要做什么，抱歉
它在我之前评论的链接中向您展示了如何操作，但您只需单击我的答案左上角附近的小复选框轮廓。当您将此标记为已接受的答案时，它会变成纯绿色。

【解决方案2】：

您可以使用 jQuery 切换，具有多个事件。见http://api.jquery.com/toggle-event/

$("#button").toggle(
  function() {
    $(this).css("background-image","url(one.png)");
  },   
  function() {
    $(this).css("background-image","url(two.png)");
  },   
  function() {
    $(this).css("background-image","url(three.png)");
  }
});

修改它以更改 src 属性将是微不足道的

$(this).attr('src', ...);

【讨论】：

【解决方案3】：

你可以试试这样的：

<button id="b_music" onclick="_js_ToggleAudio();">
Music
</button>

<script>
var toggle1 = 0; //define global variable outside the function where to store the toggle state
function _js_ToggleAudio() {
    if (toggle1 === 0) {
        document.querySelector('#b_music').style.color = 'orange'; //play music
        toggle1 = 1;
    }
    else if (toggle1 === 1) {
        document.querySelector('#b_music').style.color = 'red'; //pause music
        toggle1 = 2;
    }
    else if (toggle1 === 2) {
        document.querySelector('#b_music').style.color = 'black'; //stop music
        toggle1 = 0;
    }
}
</script>

演示：https://jsfiddle.net/eliz82/vLy072nq/

【讨论】：