javascript - 如何在单击时向按钮添加类
问题描述
很抱歉这个愚蠢的问题,但我无法在点击按钮时添加类。我有按钮列表,单击时我需要更改活动按钮的背景。我不知道如何在列表内单击并添加类时获取元素索引。我需要在纯javascript上制作它。只需要离开 $(document).ready(function()
。这是我的小提琴https://jsfiddle.net/armakarma/ns5tfcL0/15/
HTML
<div class="content-itinerary__buttons-wrapper">
<button class="content-itinerary__buttons description-text ">Day 2</button>
<button class="content-itinerary__buttons description-text">Day 3</button>
<button class="content-itinerary__buttons description-text">Day 4</button>
</div>
JS
$(document).ready(function() {
let myBtns=document.querySelector('.content-itinerary__buttons-wrapper')
myBtns.addEventListener('click', ()=>{
console.log('test')
})
});
解决方案
只需要离开$(document).ready(function()
DOMContentLoaded
我不确定当您拥有等效的 JavaScript ( )时为什么需要保留它。
循环遍历所有按钮,在事件处理函数内部首先从所有按钮中删除类,然后仅将类添加到单击的按钮:
document.addEventListener('DOMContentLoaded', () => {
let myBtns=document.querySelectorAll('.content-itinerary__buttons');
myBtns.forEach(function(btn) {
btn.addEventListener('click', () => {
myBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
});
.active {
color: #fff;
background-color: #4CAF50;
}
<div class="content-itinerary__buttons-wrapper">
<button class="content-itinerary__buttons description-text ">Day 2</button>
<button class="content-itinerary__buttons description-text">Day 3</button>
<button class="content-itinerary__buttons description-text">Day 4</button>
</div>
推荐阅读
- python - Python:使用 Selenium 获取安全 cookie
- visual-studio-code - 理论上是否可以在 VS Code 中获得插入符号的 x,y 屏幕坐标?
- python - 如何使用 selenium 和 python 允许基于浏览器的弹出窗口
- python - id() 用于 python 3.x 中的复数
- mongodb - Mongorestore 行为
- php - 在 Laravel 中登录后将接口绑定到实现
- go - *time.Time 不是 proto.Message:缺少方法 ProtoMessage
- android - 如果使用 setVariable() 方法设置 ViewModel,则 DataBinding 不起作用
- python - 我想从 xlsx 中提取 10 张表并将所有 10 张表导出为 python 中的 csv 格式
- java - 如何使用 java cucumber 将“#”作为特征文件中的有效参数传递