Question

以下是我现有的代码。单击时，它成功将图像更改为另一个图像。我需要改变它，所以它开始是一个按钮，说“提示？”然后在它上面改变图像。我不希望使用图像作为按钮。

<!--HINT 1-->
<script lanuage="javascript">
  function handleClick1(element) {
      element.src="http://leowestonvfx.com/wp-content/uploads/2016/02/dirty.jpg";
  }
</script>
<!--HINT 1 END-->

<img src="http://leowestonvfx.com/wp-content/uploads/2016/02/rock-hand.png" onclick="handleClick1(this);">

我以为我可以将其更改为这样的按钮，但它会停止工作：

<input type="button" value="Hint?" onclick="handleClick1(this);">

Answer 1

我建议先从隐藏的图片（style="display:none"）开始，然后使用jquery将show()图片和hide()按钮点击。

您可以在图像上使用ID和jquery选择器，而不必将this传递到您的函数中。

另外，您可以使用jquery（see this question）更改图像的src。另一种选择是使用append方法追加html。

Answer 2

您的原始代码使用以下行：

<img onclick="handleClick1(this);">

因此，您的代码实际上是在尝试调用

button.src="http://example.com/myimage.png";

这不起作用，因为src属性仅适用于图像元素。

获得所需效果的最简单方法是将元素放在容器中，然后通过CSS控制它是否应该可见。这样的事情可以解决你的问题：

<强> HTML

<div class="hint">
    <button type="button">Hint?</button>
    <img src="http://example.com/my_ending_image.png">
 </div>

<强>的JavaScript

function buttonClick(){
    this.parentNode.classList.add("show");
}

var buttons = document.querySelectorAll(".hint button");
for (var x=0; x<buttons.length; x++) {
    buttons[x].addEventListener("click", buttonClick);
}

<强> CSS

.hint.show button {
  display: none;
}

.hint img {
  display: none;
}

.hint.show img {
  display: block;
}

可以看到显示功能的JSFiddle here

Answer 3

感谢您的回答。我实际上想出了如何做到这一点：

<body onload="hideallhints()">


<script>
function hideallhints() {
    document.getElementById("artwork1").style.display = "none"; 
}

function HINT1() {
    document.getElementById("artwork1").style.display = "block"; 
    document.getElementById("hintbutton").style.display = "none";
}
</script>


<img id="artwork1" src="w3javascript.gif" width="100" height="132">
<br>

<button type="button" id="hintbutton" onclick="HINT1()">Hint?</button>



</body>

如何在点击时将按钮更改为图像？

3 个答案: