我正在尝试根据单击的内容向 div 添加不同的类,我已经设法做到了这一点,但需要删除之前单击/选择的类并替换为单击的类,似乎无法获取删除部分正确。我遇到的大多数解决方案要么是在两个类之间切换,要么是添加和删除,但不是 3 个或更多。
谢谢
这是我到目前为止所尝试过的,添加部分按预期工作,但是当我单击不同的按钮时,它不会删除之前单击的按钮
HTML
<button id="btn-1" data-width="w-1/3">Mobile</button>
<button id="btn-2" data-width="w-2/3">Tablet</button>
<button id="btn-3" data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
Javascript
let setMobile = document.querySelector('#btn-1');
let setTablet = document.querySelector('#btn-2');
let setDesktop = document.querySelector('#btn-3');
let btns = [setMobile, setTablet, setDesktop];
function getBtnId(btn) {
btn.addEventListener('click', function() {
let frame = document.querySelector('.frame')
frame.classList.add(this.dataset.width)
if(frame.classList.contains(btns)){
frame.classList.remove(this.dataset.width)
}
console.log(this.dataset.width);
});
}
btns.forEach(getBtnId);
基本上,我想做的是一个响应式框架,它将根据单击的内容调整其宽度。
最佳答案
您可以将当前类存储在变量中,并使用 remove()
在每次点击时删除先前的类。
let setMobile = document.querySelector('#btn-1');
let setTablet = document.querySelector('#btn-2');
let setDesktop = document.querySelector('#btn-3');
let btns = [setMobile, setTablet, setDesktop];
var currentClass;
function getBtnId(btn) {
btn.addEventListener('click', function() {
let frame = document.querySelector('.frame')
if (currentClass) {
frame.classList.remove(currentClass);
}
currentClass = this.dataset.width;
frame.classList.add(currentClass);
console.log(this.dataset.width);
});
}
btns.forEach(getBtnId);
<button id="btn-1" data-width="w-1/3">Mobile</button>
<button id="btn-2" data-width="w-2/3">Tablet</button>
<button id="btn-3" data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
关于javascript - 如何向 div 元素添加和删除类纯 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58020494/