3状态切换按钮
[英]3 state toggle button
问题描述
我在按钮切换时遇到了一些麻烦，我到目前为止已经研究了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>
到目前为止这是有效的，但奇怪的是，它是同时显示两个图像。
3 个解决方案
解决方案1
1 2012-09-20 15:38:31
您可以使用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', ...);
解决方案2
1 已采纳 2012-09-20 15:45:31
首先，在我看来，你的两个功能正在做同样的事情。 他们正在切换图像的display属性。 在这两种情况下，如果display设置为''，则设置为'none'。 如果display设置为'none'，则将其设置为''。
其次，我认为问题在于你正在切换它们。 如果您只想一次显示一个，则需要设置一个显示，另外两个隐藏。 如果您每次只是切换它们，那么隐藏的两个将始终更改为同时显示。
我认为应该看起来更像这样:( 样本 ）
<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">
解决方案3
0 2017-06-11 16:53:58
你可以尝试这样的事情：
<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>
令人困惑的切换按钮状态。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.