Question

我在使用按钮切换时遇到了一些麻烦，我现在在这里学习了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>

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

Answer 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', ...);

Answer 2

首先，它看起来像你的两个功能正在做同样的事情。他们正在切换图像的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">

Answer 3

您可以尝试这样的事情：

/drawable-ldpi For low density screens.
/drawable-mdpi For medium density screens.
/drawable-hdpi For high resolution screens.
/drawable-xhdpi For extra high resolution screens.

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

3状态切换按钮

3 个答案: