javascript - 使用 javascript 切换类
问题描述
我有 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>
解决方案
编码的“正确”方式:
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>
推荐阅读
- java - Spark 在“org.codehaus.commons.compiler.CompileException”的日志中批量处理代码
- java - Android:许多按钮上的相同 OnClickListener
- android - RecyclerView:是否有用于处理项目点击的 OnItemActivatedListener 选项的替代方案?
- spring - 无法推断基本网址。这在使用动态 servlet 注册或 API 位于 API 网关后面时很常见
- c++ - 如何使用 lldb 和 VSCode 使调试器保持活动状态,以便与 bitcoind 和 bitcoin-cli 一起使用?
- rust - 在函数参数中,使用 ref 关键字和使用 & 符号有什么区别?
- typescript - 不能使用扩展另一个接口的接口作为方法的参数
- python - 如何转换excel csv中的日期格式?
- python - 在 Django 中缓存每个应用程序而不是每个站点或每个视图
- html - HTML 输入仅接受数字和字母,无需脚本