-1

皆さんすみません、質問があります。関数が応答しなかったのはなぜですか?

私のhtml：

<img id="btn" src="img/button.png" onclick="show()"></img>
...
<img id="xxx" src=""></img>

私のスクリプト： 

function show(){
    document.getElementById("xxx").src = "img/src.png";
    document.getElementById("btn").onclick = "hide()";
}
function hide(){
    document.getElementById("xxx").src = "";
    document.getElementById("btn").onclick = "show()";
}

function show()ボタンをクリックすると、応答する最初の機能 [ ] のみ。助けてください。ありがとう。

4

3 に答える 3

1

毎回 onclick ハンドラーを変更するのは最善の解決策ではありません。クリック処理コードを 1 か所にまとめます。

HTML:

<img id="btn" src="img/button.png" onclick="clickHandler()"></img>

<img id="xxx" src=""></img>

そしてJavascript：

function clickHandler() {
  var img = document.getElementById("xxx");
  img.src = !img.src ? "img/src.png" : "";
}

更新: (@nathoenk のコメントへの返信) とにかく、ユーザーがクリックするたびにイベント ハンドラーを交換するべきではありません。たとえば、「表示/非表示」ロジックの現在の状態を保持するグローバル変数を作成できます。

var imagesAreHidden = true;
function clickHandler() {
  if (imagesAreHidden) {
    // do "show" logic
    document.getElementById("xxx1").src = "img/src1.png";
    document.getElementById("xxx2").src = "img/src2.png";
    document.getElementById("xxx3").src = "img/src3.png";
  } else {
    // hide"
    document.getElementById("xxx1").src = "";
    document.getElementById("xxx2").src = "";
    document.getElementById("xxx3").src = "";        
  }
  imagesAreHidden = !imagesAreHidden; 
}
于 2013-08-22T11:51:49.583 に答える
-1

次の行を使用してください: document.getElementById("btn").onclick = hide;

javascriptではなくjQueryでそれを行い、最初にクラス「show」をbtnに追加します：

$('.show').click(function(){$('#xxx').attr('src','img/src.png');$(this).addClass=('hide');$(this).removeClass('show')});
$('.hide').click(function(){$('#xxx').attr('src','');$(this).addClass=('show');$(this).removeClass('hide')})
于 2013-08-22T11:41:03.680 に答える