[英]How to add and remove a class to a div element plain javascript
I am trying to add different classes to a div based on what is clicked, which I've managed to do, but need to remove the previously clicked/selected class and replace with the clicked one, Can't seem to get the remove part right.我正在尝试根据单击的内容向 div 添加不同的类,我已经设法做到了,但需要删除以前单击/选择的 class 并替换为单击的类,似乎无法删除部分正确的。 Most of the solutions I've come across are either toggles or adding and removing between two classes, but not 3 or more.
我遇到的大多数解决方案要么是切换,要么是在两个类之间添加和删除,但不是 3 个或更多。
Thanks谢谢
This is what I have tried so far and the add part works as expected but when I click a different button it does not remove the previous clicked one这是我迄今为止尝试过的,添加部分按预期工作,但是当我单击另一个按钮时,它不会删除前一个单击的按钮
The HTML 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>
The Javascript 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);
Basically, what I am trying to do is a responsive frame which will adjust its width depending on what is clicked.基本上,我想做的是一个响应式框架,它将根据点击的内容调整其宽度。
You can store the current class in a variable and use the remove()
to remove the previous class on each click.您可以将当前的 class 存储在一个变量中,并在每次单击时使用
remove()
删除以前的 class。
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>
Here's a generalized version to work with multiple elements.这是一个适用于多个元素的通用版本。 I've wrapped each frame and buttons in a
section
element.我已经将每个框架和按钮都包裹在一个
section
元素中。 Then I've bound the event listeners to the sections and used event bubbling / event delegation to perform the switch.然后我将事件侦听器绑定到这些部分并使用事件冒泡/事件委托来执行切换。 I've also used a data attribute on the target frame to hold the current state.
我还在目标帧上使用了一个数据属性来保存当前的 state。
function setWidthClass(event) { var newWidth = event.target.dataset.width; //This identifies a button click with our dataset if (newWidth) { //get the target div var target = this.querySelector(".frame"); //if the target has a class set remove it if (target.dataset.width) { target.classList.remove(target.dataset.width); } //Add the new class target.classList.add(newWidth); //Update the data on the target element target.dataset.width = newWidth; } } //Add the event listener var sections = document.querySelectorAll(".varyWidth"); for (var i = 0; i < sections.length; i++) { sections[i].addEventListener("click", setWidthClass); }
.w-third { color: red; }.w-half { color: blue; }.w-full { color: green; }
<section class="varyWidth"> <button data-width="w-third">Mobile</button> <button data-width="w-half">Tablet</button> <button data-width="w-full">Desktop</button> <div class="frame"> Some Content </div> </section> <section class="varyWidth"> <button data-width="w-third">Mobile</button> <button data-width="w-half">Tablet</button> <button data-width="w-full">Desktop</button> <div class="frame"> Some Content </div> </section> <section class="varyWidth"> <button data-width="w-third">Mobile</button> <button data-width="w-half">Tablet</button> <button data-width="w-full">Desktop</button> <div class="frame"> Some Content </div> </section>
Rather than track the current class, you can also just reset it:除了跟踪当前的 class,您还可以将其重置:
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') // reset the classList frame.classList = ["frame"]; frame.classList.add(this.dataset.width) 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.