首頁猿問為什么我必須單擊兩次此...

為什么我必須單擊兩次此 JavaScript 函數才能工作？

Html5

慕娘9325324 2023-09-11 16:37:00

為了使該功能將顯示更改為“隱藏”然后返回“阻止”，每次需要單擊 2 次。為什么是這樣？如何將其減少到只需一鍵點擊？function showOfferMessage() { var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }}<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage()"> <div class="offer-info-item"> <div class="offcatreview-title"> <h3>Cat. Rating</h3> </div> <div class="offer-cat-rating"> </div> </div></div><div class="content"> <p>'.$message.'</p></div>

查看完整描述

3 回答

一只甜甜圈

TA貢獻1836條經驗獲得超5個贊

那是因為您在每次點擊時都注冊了一個事件偵聽器！因此，每次單擊時，偵聽器都會再次執行。

您的代碼已修復：

function showOfferMessage(element) {

element.classList.toggle("active");

var content = element.nextElementSibling;

if (content.style.display === "block") {

content.style.display = "none";

} else {

content.style.display = "block";

}

<h3>Cat. Rating</h3>

</div>

</div>

<p>'.$message.'</p>

</div>

反對回復 2023-09-11

白衣非少年

TA貢獻1155條經驗獲得超0個贊

該onclick事件執行在元素showOfferMessage() {}上放置事件偵聽器的函數"collapsible"。然后第二次單擊執行事件監聽器的內容。

但首先，只要你只有一個名為"collapsible"“為什么”的元素，就嘗試獲取多個元素。使用 css 樣式選擇器執行document.querySelector并定位元素，然后addEventListener直接鏈接到該選擇器上。

當您像這樣查詢樣式時，您會得到顯式設置的樣式。在您的情況下，如果沒有單擊該"collapsible"元素，則不會設置顯示樣式。即使 div 具有塊的默認顯示樣式，但它尚未顯式設置，因此...style.display將返回空字符串 -> falsy。您必須使用該getComputedStyle方法獲得隱式樣式，

像這樣（

? this.classList.toggle("active");

? var content = document.querySelector(".content");

? if (window.getComputedStyle(content).display === "block") {

? ? content.style.display = "none";

? } else {

? ? content.style.display = "block";

? }

});

我可能會在事件監聽器中使用箭頭函數：

document.querySelector(".collapsible").addEventListener("click", event => {

? event.target.classList.toggle("active");