很抱歉提出了愚蠢的问题,但我无法在单击时向按钮添加类。我有按钮列表,单击后我需要更改活动按钮的背景。我不知道如何在单击列表内部并添加类时获取元素的索引。我需要用纯 JavaScript 来实现。只需要离开$(document).ready(function()
。这是我的小提琴https://jsfiddle.net/armkarma/ns5tfcL0/15/ 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()
我不知道当你有等效的 JavaScript (DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
循环遍历所有按钮,在事件处理函数内首先删除class从所有按钮然后添加class仅针对单击的按钮:
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)