Question

我正在尝试设置功能，如果我单击按钮或嵌套在按钮中的图标，则它们的样式将同时更改。不幸的是，当我单击同一按钮时，只有其样式会更改，并且图标不会响应。

有没有一种简单的方法可以正确实现？

if(e.target.className === 'check-button' || 'fa fa-check'){ //change color
        e.target.closest('.fa-check').style.color = "white";
        e.target.closest('.check-button').style.backgroundColor = "coral";
        e.target.closest('.check-button').style.border = '2px solid coral';                         
    }

Answer 1

e.target.className === 'check-button' || 'fa fa-check'不会将e.target.className与左侧的两个字符串进行比较。但是它将与左值中的第一个真实值进行比较。您可以使用数组和Array.prototype.some()

其次，不要再使用closest并将其再次存储在变量中并使用

if(['check-button','fa fa-check'].some(a => a===e.target.className)){ //change color
        e.target.closest('.fa-check').style.color = "white";
        let elm = e.target.closest('.check-button');
        elm.style.backgroundColor = "coral";
        elm.style.border = '2px solid coral';                         
    }

Answer 2

我在代码中翻找，并在css中为@jameslafferty之类的选定按钮添加了类。我没有更改发布的代码，但添加了childNodes [0]，以便将“ selected”类添加到嵌套图标中。然后，无论我在哪里单击按钮，按钮都会同时带有图标更改样式。

containerPerson.addEventListener('click', (e) => {
    if(e.target.closest('.check-button') !== null){ //adding classes for button and icon
        e.target.closest('.check-button').classList.add('selected');
        e.target.closest('.check-button').childNodes[0].classList.add('selected');
    }
    if(e.target.className === 'check-button' || 'fa fa-check'){ //change color
        e.target.closest('.check-button').style.backgroundColor = "coral";
        e.target.closest('.fa-check').style.color = "white";
        e.target.closest('.check-button').style.border = '2px solid coral';                         
    }
});

如何通过单击更改按钮样式和嵌套在按钮中的图标样式？

2 个答案: