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

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

---

基本上，我尝试做的是一个响应帧，它将根据单击的内容调整其宽度。

您可以将当前类存储在一个变量中，并使用

remove（）

在每次单击时删除上一个类

let setMobile=document.querySelector（'btn-1'）；
设setTablet=document.querySelector（“#btn-2”）；
设setDesktop=document.querySelector（“#btn-3”）；
设BTN=[setMobile、setTablet、setDesktop]；
无功电流等级；
函数getBtnId（btn）{
btn.addEventListener（'click'，function（）{
让frame=document.querySelector（“.frame”）
如果（当前类）{
frame.classList.remove（currentClass）；
}
currentClass=this.dataset.width；
frame.classList.add（currentClass）；
console.log（this.dataset.width）；
});
}
btns.forEach（getBtnId）
Mobile
药片
桌面
一些内容
您可以将当前类存储在变量中，并使用
remove（）
在每次单击时删除上一个类


let setMobile=document.querySelector（'btn-1'）；
设setTablet=document.querySelector（“#btn-2”）；
设setDesktop=document.querySelector（“#btn-3”）；
设BTN=[setMobile、setTablet、setDesktop]；
无功电流等级；
函数getBtnId（btn）{
btn.addEventListener（'click'，function（）{
让frame=document.querySelector（“.frame”）
如果（当前类）{
frame.classList.remove（currentClass）；
}
currentClass=this.dataset.width；
frame.classList.add（currentClass）；
console.log（this.dataset.width）；
});
}
btns.forEach（getBtnId）
Mobile
药片
桌面
一些内容
除了跟踪当前类，您还可以将其重置：


let setMobile=document.querySelector（'btn-1'）；
设setTablet=document.querySelector（“#btn-2”）；
设setDesktop=document.querySelector（“#btn-3”）；
设BTN=[setMobile、setTablet、setDesktop]；
函数getBtnId（btn）{
btn.addEventListener（'click'，function（）{
让frame=document.querySelector（“.frame”）
//重置类列表
frame.classList=[“frame”]；
frame.classList.add（this.dataset.width）
console.log（this.dataset.width）；
});
}
btns.forEach（getBtnId）
Mobile
药片
桌面
一些内容
除了跟踪当前类，您还可以将其重置：


let setMobile=document.querySelector（'btn-1'）；
设setTablet=document.querySelector（“#btn-2”）；
设setDesktop=document.querySelector（“#btn-3”）；
设BTN=[setMobile、setTablet、setDesktop]；
函数getBtnId（btn）{
btn.addEventListener（'click'，function（）{
让frame=document.querySelector（“.frame”）
//重置类列表
frame.classList=[“frame”]；
frame.classList.add（this.dataset.width）
console.log（this.dataset.width）；
});
}
btns.forEach（getBtnId）
Mobile
药片
桌面
一些内容
这里有一个通用版本，可以处理多个元素。我将每个框架和按钮包装在一个
部分
元素中。然后，我将事件侦听器绑定到各个部分，并使用事件冒泡/事件委派来执行切换。我还在目标帧上使用了一个数据属性来保存当前状态


函数setWidthClass（事件）{
var newWidth=event.target.dataset.width；
//这标识了数据集中的按钮点击
如果（新宽度）{
//获取目标div
var target=this.querySelector（“.frame”）；
//如果目标设置了类，请将其删除
if（target.dataset.width）{
target.classList.remove（target.dataset.width）；
}
//添加新类
target.classList.add（newWidth）；
//更新目标元素上的数据
target.dataset.width=newWidth；
}
}
//添加事件侦听器
var sections=document.queryselectoral（“.varyWidth”）；
对于（变量i=0；i

.w-third{
颜色：红色；
}
w-half博士{
颜色：蓝色；
}
.w-full{
颜色：绿色；
}

可移动的
药片
桌面
一些内容
可移动的
药片
桌面
一些内容
可移动的
药片
桌面
一些内容
这里有一个通用版本，可以处理多个元素。我将每个框架和按钮包装在一个
部分
元素中。然后，我将事件侦听器绑定到各个部分，并使用事件冒泡/事件委派来执行切换。我还在目标帧上使用了一个数据属性来保存当前状态


函数setWidthClass（事件）{
var newWidth=event.target.dataset.width；
//这标识了数据集中的按钮点击
如果（新宽度）{
//获取目标div
var target=this.querySelector（“.frame”）；
//如果目标设置了类，请将其删除
if（target.dataset.width）{
target.classList.remove（target.dataset.width）；
}
//添加新类
target.classList.add（newWidth）；
//更新目标元素上的数据
target.dataset.width=newWidth；
}
}
//添加事件侦听器
var sections=document.queryselectoral（“.varyWidth”）；
对于（变量i=0；i

.w-third{
颜色：红色；
}
w-half博士{
颜色：蓝色；
}
.w-full{
颜色：绿色；
}

可移动的
药片
桌面
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);