javascript-if条件不能正常工作

drkbr07n  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(261)

我希望当我点击按钮时,它会显示内容并获取类列表(“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>
of1yzvn4

of1yzvn41#

使用事件侦听器时, if 语句应该在函数内部。
使用 addEventListener() 是一种在每次调用事件时添加函数的方法。在这里,当 display !== "none" ,因此它仅在初始化时验证显示。
以下是你的第一句话:

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

相关问题