Javascript - 如果條件不能正常工作

Question

當我點擊按鈕時，它會顯示內容並獲取類列表（“pm_sl_active”）以獲取顏色和字體粗細，如果我點擊第二個按鈕，第一個按鈕的內容、顏色和粗細就會消失。

我不知道我在 if 條件下是否有錯誤。

感謝您的所有回復。

 let p_m = document.body.querySelector(".p_m"); let s_l = document.body.querySelector(".s_l"); let poledniMenu = document.body.querySelector(".poledniMenu"); let stalyListek = document.body.querySelector(".stalyListek"); if (poledniMenu.style.display === "block") { p_m.classList.add("pm_sl_active"); } else{ p_m.addEventListener("click", ()=> { poledniMenu.style.display = "block"; stalyListek.style.display = "none"; }); } if (stalyListek.style.display === "block") { s_l.classList.add("pm_sl_active"); } else{ s_l.addEventListener("click", ()=> { stalyListek.style.display = "block"; poledniMenu.style.display = "none"; s_l.classList.remove("pm_sl_active"); }); }

 button{ padding: 10px 30px; margin: 0; cursor: pointer; } .pm_sl_active{ color: rgb(255, 87, 87); font-weight: 800; } .poledniMenu{ display:block; } .stalyListek{ display: none; }

 <button class="p_m">Polední menu</button> <button class="s_l">Stálý lístek</button> <div class="poledniMenu"> <h3>POLEDNÍ MENU <br> 25.6.2021</h3> <p>Rozvoz z technických důvodů není.<br> Děkujeme za pochopení.</p> </div> <div class="stalyListek"> <h3>STÁLÝ JÍDELNÍ LÍSTEK</h3> <p>Rozvoz z technických důvodů není.<br> Děkujeme za pochopení.</p> </div>

Answer 1

當您使用事件偵聽器時， if語句應該在函數內部。

使用addEventListener()是一種在每次調用事件時添加函數的方法。 在這里，您在display !== "none"時向元素添加“click”事件，因此它僅在初始化時驗證顯示。

以下是如何做你的第一個陳述：

p_m.addEventListener("click", function() {
    if (poledniMenu.style.display !== "block") {
        poledniMenu.style.display = "block";
        stalyListek.style.display = "none";
    } else {
        p_m.classList.add("pm_sl_active");
    }
});

我還反轉了您的if語句：顯示的元素並不總是具有block值。