Question

对不起大家，我有一个问题。为什么功能没有回应？

我的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()]响应。请帮忙。感谢。

Answer 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; 
}

Answer 2

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

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;
}

Answer 3

只需使用此行： 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')})

onClick没有响应hide（）和show（）函数

3 个答案: