javascript 函数 onclick 必须点击两次 -_- 为什么会这样？

Question

我有一个页面(这是一个网站的常见问题页面)，当用户点击一个 div(例如#question01)时，它下面会出现一个新的 div。真的很简单，但问题是，使用我的功能，当您第一次单击时，什么也没有出现，然后再单击一次，就可以了。我的#faqAnswer01 现在有一个“取消隐藏”类，该类设置为显示: block ； (.hide = display:none;)

所以这是我的两个问题:

1- 为什么我必须点击两次才能执行我的函数？

2- 如何修复我的代码，使其只需单击一下即可运行？

HTML代码

<div id="faqContainer">

   <div id="question01" onclick="showAnswer('faqAnswer01','imgArrow01');">Here's a question?<img src="public/images/gt.png" class="imgArrow" id="imgArrow01"></div>
        <div id="faqAnswer01" class="faqAnswerDiv hide">bla bla bla</div>

   <div id="question02" onclick="showAnswer('faqAnswer02','imgArrow02');">Another question here? <img src="public/images/gt.png" class="imgArrow" id="imgArrow02"></div>
    <div id="faqAnswer02" class="faqAnswerDiv hide">answer here.</div>

</div>

我的功能:

function showAnswer(idAnswer , idImg) {
    if (document.getElementById(idImg).src == "http://www.cbifinance.org/public/images/gt.png") {
        document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt90.png";
        document.getElementById(idAnswer).className = 'faqAnswerDiv unhide';
    } else {
        document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt.png";
        document.getElementById(idAnswer).className = 'faqAnswerDiv hide';
    }
}

Answer 1

尝试将 image.src 更改为完整的 URL，它应该可以工作。

这会起作用的原因是你的 src 是 public/images/gt.png 即使当它加载图像时它正确地找到它， src 仍然是 public/images/gt.png。

所以第一次点击时，它会遇到 else 语句，并将 src 设置为完整的绝对 url。然后您再次单击，它会将 src 更改为您第一次预期的内容。 class 也是如此，它将 hide 类添加到图像中，它已经有了，但第二次添加了 show。代码运行正常，只是 if 语句出错了。