javascript - 更改被点击的唯一按钮的颜色

Question

我的意思是我只想更改我单击的按钮的 CSS 属性，同时将其他按钮设置为以前的颜色。希望我清楚地解释了我的问题

for(let i = 0; i < categoryBtns.length; i++) {
    categoryBtns[i].addEventListener('click', function() {
        let attr = this.getAttribute('id');
        if(categoryBtns[i - 1].id != attr || categoryBtns[i + 1].id != attr) {
            log([i]);
            console.log('works');
            this.style.backgroundColor = '#000000';
        } else {
            log('no');
        }
    })
}

我还有只显示具有当前类别的 div 的代码。我应该在显示和隐藏 div 的同时编码按钮吗？

$(document).ready(function() {
    $('.category-item').click(function() {
        let category = $(this).attr('id');
        if(category == 'all') {
            $('.prod_item').addClass('hide');
            setTimeout(function() {
                $('.prod_item').removeClass('hide');
            }, 300);
        } else {
            $('.prod_item').addClass('hide');
            setTimeout(function() {
                $('.' + category).removeClass('hide');
            }, 300);
        }
    });
});

标签： javascriptjqueryloops

Answer 1

我希望我能正确理解你想要什么

const btns = document.querySelectorAll('.btn')

btns.forEach(btn => {
  btn.addEventListener('click', () => {
    btns.forEach(b => {
       (b.classList.contains("active"))?
       b.classList.remove("active"):true
    });
    btn.classList.add("active")
  
  });
})

.active {
  background-color: blue;
  
}

<button class = "btn">Click Me</button>
<button class = "btn">Click Me</button>
<button class = "btn active">Click Me</button>
<button class = "btn">Click Me</button>
<button class = "btn">Click Me</button>