JS 上只有一个活动按钮

Question

需要做到这一点，以便您只能从两个按钮中选择一个活动按钮。HTML<button class="main__btn">uomo</button><button class="main__btn">donna</button>JS'use strict'const mainBtn = document.querySelectorAll('.main__btn');mainBtn.forEach(el => {    el.addEventListener('click', (event) => {        const target = event.currentTarget;        if(el.classList.contains('active')) {            el.classList.remove('active');        } else {            el.classList.add('active');        }    });});

Answer 1

尝试使用我建议的 ID 来简化代码！如此简单的任务太多了

 'use strict'

    const mainBtn = document.querySelectorAll('.main__btn');

    const uomo = document.getElementById('uomo');

    const donna = document.getElementById('donna');

    mainBtn.forEach(el => {

        el.addEventListener('click', (event) => {

            const target = event.currentTarget;

                console.log(target.id);

            if(target.id=="uomo") {

                donna.classList.remove('active');

                            uomo.classList.add('active');

            } else {

                donna.classList.add('active');

                        uomo.classList.remove('active');

            }

        });

    });

Answer 2

const buttonOne = document.getElementById('buttonOne');

const buttonTwo = document.getElementById('buttonTwo');

buttonOne.addEventListener('click', makeActive);

buttonTwo.addEventListener('click', makeActive); 

function makeActive(event){

if(!event.target.classList.contains('active')){

buttonOne.classList.toggle('active')

buttonTwo.classList.toggle('active')

}

}

.active{

background-color:black;

color:white;

}

<button id='buttonOne' class="main__btn active" >uomo</button>

<button id='buttonTwo' class="main__btn">donna</button>

你也可以这样做。