gpt4 book ai didi

javascript - 如何在单击时向按钮添加类

转载 作者:行者123 更新时间:2023-11-28 04:15:44 26 4
gpt4 key购买 nike

很抱歉提出愚蠢的问题,但我无法在单击时向按钮添加类。我有按钮列表,单击时我需要更改事件按钮的背景。我不知道如何在列表中单击并添加类时获取元素索引。我需要在纯 javascript 上制作它。只需要离开 $(document).ready(function() 。这是我的 fiddle 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) 时为什么需要保留它。

遍历所有按钮,在事件处理函数中首先从所有按钮中删除,然后仅将添加到单击的按钮:

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>

关于javascript - 如何在单击时向按钮添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57143671/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com