Question

我有一个页面（它是一个网站的常见问题页面），这样当用户点击一个div（例如＃question01）时，会出现一个新的div，它出现在它下面。真的很简单，但问题是，通过我的功能，当你第一次点击时，什么都没有出现，然后再点击一下就可以了。我的＃faqAnswer01现在有一个＆＃34;取消隐藏＆＃34;设置为显示的类：块; （.hide = display：none;）

所以这是我的两个问题：

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

2-我如何修复我的代码，以便只需点击一下就能运行？

HTML CODE

<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更改为完整的网址，它应该有效。

这可行的原因是您的src为public/images/gt.png，即使加载正确找到的图片时，src仍为public/images/gt.png。

因此，第一次单击时，它会运行到else语句中，并将src设置为完整的绝对URL。然后再次单击，它将src更改为您第一次的预期。同样适用于class，它将hide类添加到图像中，它已经具有，但第二次添加show。代码运行正常，if语句错误。

Answer 2

因为第一次src不是您if正在检查的内容

src="public/images/gt.png"

VS

src="http://www.cbifinance.org/public/images/gt.png"

然后在第一次单击时将其设置为该值。然后第二次满足您的if条件。

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

2 个答案: