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值。