-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 处理程序并不是最好的解决方案。让您的点击处理代码在一个地方：

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 回答
0

您应该直接传递对函数的引用。不是函数的名称。

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;
}
于 2013-08-22T11:50:26.717 回答
-1

只需使用这一行： document.getElementById("btn").onclick = hide;

使用 jQuery 而不是 javascript，首先将类“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 回答