Javascript - 如果条件不能正常工作答案

【问题标题】：Javascript - If condition does not work properlyJavascript - 如果条件不能正常工作
【发布时间】：2021-07-12 10:48:29
【问题描述】：

当我单击按钮时，它会显示内容并获取类列表（“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>

【问题讨论】：

“我不知道我是否在 if 条件中有错误” - 那么如果没有问题/错误，为什么还要问这个问题呢？
How do I ask a good question?: “描述问题。“它不起作用”不足以帮助人们理解你的问题。相反，告诉其他读者预期的行为应该是什么。告诉其他读者错误消息的确切措辞是什么，以及产生错误消息的代码行。使用对问题的简短但描述性摘要作为问题的标题。"
Duplicate of Why element.style always return empty in JS?。直接检查 CSS 属性是best avoided。相反，应该使用 CSS 类并使用.classList.has("cls") 检查、使用.classList.toggle("cls", condition) 切换等。考虑改用hidden attribute。

标签： javascript html css if-statement

【解决方案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 值。

【讨论】：

谢谢，但我还有另一个问题:(。我想在显示被阻止时自动添加类列表“pm_sl_active”，然后当显示为无时删除该类。我试图做 if (poledniMenu. style.display === "block") { p_m.classList.add("pm_sl_active"); } 但它不起作用：-/
好吧，我自己解决了 :) 这很容易 :) 非常感谢 :)