使用 javascript 切换类

Posted

技术标签:

【中文标题】使用 javascript 切换类【英文标题】:Toggle classes with javascript 【发布时间】:2021-05-10 08:30:48 【问题描述】:

我有 3 个按钮。他们都使用 css 选项切换不同的内容display: none; display: flex; 使用 javascript,我在 .show 类之间切换。对于每个按钮,我都有一个切换脚本。

它会检测另一个按钮是否已打开但不能正常工作。如果我单击按钮 1,然后单击 2,它将起作用。但是,如果我在那之后点击数字 3,它会删除所有内容而不是切换正确的类。

另外我发现这是一个很长的代码,很可能用更少的东西完成。

我对更少的代码感到满意,但问题的重点是让我明白我做错了什么。

// Button 1
let b1 = document.querySelector(".button1");
let b1_toggle = document.querySelector(".toggle-button-1");
b1.addEventListener("click", function()
    let b2_toggle = document.querySelector(".toggle-button-2");
    let b3_toggle = document.querySelector(".toggle-button-3");
    let alreadyOpen = false;
    if (b2_toggle.classList.contains("show"), b3_toggle.classList.contains("show")) alreadyOpen = true;
    b2_toggle.classList.remove("show");
    b3_toggle.classList.remove("show");
    if (!alreadyOpen)b1_toggle.classList.toggle("show");
);
// Button 2
let b2 = document.querySelector(".button2");
let b2_toggle = document.querySelector(".toggle-button-2");
b2.addEventListener("click", function()
    let b1_toggle = document.querySelector(".toggle-button-1");
    let b3_toggle = document.querySelector(".toggle-button-3");
    let alreadyOpen = false;
    if (b1_toggle.classList.contains("show"), b3_toggle.classList.contains("show")) alreadyOpen = true;
    b1_toggle.classList.remove("show");
    b3_toggle.classList.remove("show");
    if (!alreadyOpen)b2_toggle.classList.toggle("show");
);
// Button 3
let b3 = document.querySelector(".button3");
let b3_toggle = document.querySelector(".toggle-button-3");
b3.addEventListener("click", function()
    let b1_toggle = document.querySelector(".toggle-button-1");
    let b2_toggle = document.querySelector(".toggle-button-2");
    let alreadyOpen = false;
    if (b1_toggle.classList.contains("show"), b2_toggle.classList.contains("show")) alreadyOpen = true;
    b1_toggle.classList.remove("show");
    b2_toggle.classList.remove("show");
    if (!alreadyOpen)b3_toggle.classList.toggle("show");
);
.flex 
  display: flex;

.button 
  background-color: red;
  color: white;
  padding: 10px 20px;

.toggle-button-1  display: none;
.toggle-button-1.show  display: flex;
.toggle-button-2  display: none;
.toggle-button-2.show  display: flex;
.toggle-button-3  display: none;
.toggle-button-3.show  display: flex;
<div class="flex">
  <div class="button button1">Button1</div>
  <div class="button button2">Button2</div>
  <div class="button button3">button3</div>
</div>

<div class="toggle-button-1">Button 1 toggled</div>
<div class="toggle-button-2">Button 2 toggled</div>
<div class="toggle-button-3">Button 3 toggled</div>

【问题讨论】:

看来您将comma operator 与logical and 混淆了... 另外,编程不是为每个按钮复制/粘贴代码。想象一下,你有 100 个按钮……你只需要一个功能而不是一百个。也不要将类误认为是 ID。 ClassNames 应该是通用的选择器,ID 应该是唯一的! @Siguza 把它变成一个答案,我会给你功劳。 @RokoC.Buljan 确实如此。但由于我对 javascript 很陌生,这就是我能想到的。如果您有任何提示或建议,我很乐意听取他们的意见 我认为正确的做法是关闭重复:Why does javascript accept commas in if statements? 【参考方案1】:

编码的“正确”方式:

const toggleButtons = document.querySelector('#toggle-buttons')

document.querySelector('#buttons').onclick = (target) =>
  
  if (!target.matches('div[data-button]')) return

  let actualButton = toggleButtons.className
    , targetButton = target.dataset.button
    ;
  toggleButtons.className = (actualButton===targetButton) 
                          ?  '' 
                          : targetButton
  
.flex 
  display : flex;
  
#buttons > div[data-button] 
  background-color : red;
  color            : white;
  padding          : 10px 20px;
  
#toggle-buttons > div  
  display : none;
  
#toggle-buttons.b1 > .toggle-button-1,
#toggle-buttons.b2 > .toggle-button-2, 
#toggle-buttons.b3 > .toggle-button-3  
  display : flex;
  
<div id="buttons" class="flex">
  <div data-button="b1" > Button1 </div>
  <div data-button="b2" > Button2 </div>
  <div data-button="b3" > button3 </div>
</div>

<div id="toggle-buttons"> 
  <div class="toggle-button-1">Button 1 toggled</div>
  <div class="toggle-button-2">Button 2 toggled</div>
  <div class="toggle-button-3">Button 3 toggled</div>
</div>

【讨论】:

以上是关于使用 javascript 切换类的主要内容,如果未能解决你的问题,请参考以下文章

使用 javascript 切换类

JavaScript面向对象

在普通JavaScript中切换多个类

JavaScript高级程序设计笔记之面向对象

一个家伙与javascript的故事

javascript JavaScript |在页面滚动上切换类