0

ボタンの切り替えに問題があります。画面を見つめながら、10時間勉強して、ここまで来ました。オーディオを再生および一時停止して再度再生するために、3つのボタンで切り替えを行いました。しかし、問題は（ちなみにオーディオはうまく機能します）です。起動すると、ボタン「オフ」と「一時停止」が直接表示されます。2つのうちの1つがクリックされると、オーディオの「オン」ボタンが表示されます。2つのボタンをクリックすると、再び戻ってきます。ここでは、完全なスクリプト（オーディオ再生部分を除くが、すでに機能しています）に感謝します。

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

これは今のところ機能しますが、奇妙なことに、2つの画像を同時に表示します。

4

3 に答える 3

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 に答える
1

まず第一に、あなたの2つの機能が同じことをしているように私には見えます。彼らはdisplay画像のプロパティを切り替えています。どちらの場合も、displayが''に設定されている場合は、'none'に設定されます。displayが'none'に設定されている場合、''に設定されます。

第二に、問題はあなたがそれらを切り替えていることだと思います。一度に1つだけ表示する場合は、1つを表示に設定し、他の2つを非表示に設定する必要があります。毎回切り替えるだけで、非表示になっている2つが常に同時に表示に変わります。

私はそれがもっとこのように見えるべきだと思います:(サンプル）

<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 に答える
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 に答える