Question

我有以下Javascript：

<script language="javascript">
function divToHide(q) {

   var div = document.getElementById(q);

   if (div.style.display == "block") 
   {
       div.style.display = "none"; '<img src="images/showanswer.gif"     border="0" alt="Show Answer">'
   } 
   else 
   {
       div.style.display = "block"; '<img src="images/hideanswer.gif" border="0" alt="Hide Answer">'
    }
}
</script>

在HTML代码的正文中，我有：

<a href="javascript:divToHide('q1');">
<img src="images/showanswer.gif" border="0" alt="Show Answer"></a>
<div id="q1" style="display: none">

当我点击showanswer时，它会显示答案，但图片不会更改为hideanswer。我错过了什么？

Answer 1

你只需要改变图像的src而不是完全改变图像，就像打字一样：

'<img src="images/showanswer.gif"     border="0" alt="Show Answer">'

此处不做任何操作，您应该参考图片并相应地更改src和alt属性。

这是你应该怎么做的：

function divToHide(id, img) {
  var div = document.getElementById(id);
  console.log(img);
  if (div.style.display === "none") {

    div.style.display = "block";
    img.src = "images/hideanswer.gif";
    img.alt = "Hide Answer";
  } else if (div.style.display === "block") {

    div.style.display = "none";
    img.src = "images/showanswer.gif";
    img.alt = "Show Answer";
  }
}

<img src="images/showanswer.gif" border="0" id="img1" onclick="divToHide('q1', this);" alt="Show Answer">
<div id="q1" style="display: none">Answer to Question 1</div>



<img src="images/showanswer.gif" border="0" id="img2" onclick="divToHide('q2', this);" alt="Show Answer">

<div id="q2" style="display: none">Answer to Question 2</div>


<img src="images/showanswer.gif" border="0" id="img3" onclick="divToHide('q3', this);" alt="Show Answer">

<div id="q3" style="display: none">Answer to Question 3</div>

你甚至可以做得更好，因为图像不变，你可以摆脱链接<a>，只需在图像的点击事件上调用功能：

<img src="images/showanswer.gif" onclick="divToHide('q1');" border="0" id="img" alt="Show Answer">
<div id="q1" style="display: none">Just a test </div>

修改

我编辑了这个功能，所以我们可以传递点击后的图片和div的ID，以显示/隐藏图像，如onclick="divToHide('q2', this);"，这样就符合你的需要。

如何通过单击图像显示/隐藏文本“显示”将其转换为图像“隐藏”

1 个答案: