gpt4 book ai didi

javascript - 3 状态切换按钮

转载 作者:行者123 更新时间:2023-12-02 19:21:12 29 4
gpt4 key购买 nike

我在使用按钮切换时遇到了一些问题,到目前为止,我盯着屏幕研究了 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>

到目前为止,这是可行的,但奇怪的是,它同时显示两个图像。

最佳答案

首先,在我看来,你的两个函数正在做同样的事情。他们正在切换图像的 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">

关于javascript - 3 状态切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12516001/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com