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

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 像这样 onclick="divToHide('q2', this);" ，所以它符合您的需要。