0

我在使用按钮切换时遇到了一些问题，到目前为止，我已经研究了 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>

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

4

3 回答 3

1

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

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

我认为它应该看起来更像这样：（示例）

<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">
于 2012-09-20T15:45:31.580 回答
1

您可以使用 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', ...);
于 2012-09-20T15:38:31.140 回答
0

你可以尝试这样的事情：

<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/

于 2017-06-11T16:53:58.657 回答