javascript - 如何向 div 元素添加和删除类纯 JavaScript

Question

我正在尝试根据单击的内容向 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);

基本上，我想做的是一个响应式框架，它将根据单击的内容调整其宽度。

Answer 1

您可以将当前类存储在变量中，并使用 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>