javascript函數onclick必須單擊兩次-_-為什么如此？

Question

我有一個頁面（這是網站的常見問題頁面），以便當用戶單擊div（例如＃question01）時，在其下方顯示一個新的div。 確實很容易，但事實是，有了我的功能，當您第一次單擊時，什么也沒有出現，然后再次單擊，然后就可以了。 我的＃faqAnswer01現在有一個“取消隱藏”類，該類設置為display：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語句錯誤。

Answer 2

由於第一次的src是不是你的if是檢查

src="public/images/gt.png"

VS

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

然后在第一次單擊上將其設置為該。 然后第二次if條件。