改变字体的颜色Awesome图标点击:CSS / JavaScript

Question

如果我在这里很愚蠢，请原谅我，但我试图改变3 Font Awesome图标的颜色从白色到黑色，当一个菜单被点击在我的网站上使用JavaScript添加一个类的"active"在当前的"社会偶像"阶级之上

我正在使用一个名为'toggle'的div作为导航条，目前只有第一个图标在点击时变为黑色。我试过使用querySelectorAll代替，但那不起作用，我也试过将社交图标类移动到字体awesome图标类内，但又没有。我只是想知道我哪里出错了。

感谢 JS

const menuToggle = document.querySelector('.toggle')
const showcase = document.querySelector('.showcase')
const socialToggle = document.querySelector('.social-icon')
menuToggle.addEventListener('click', function() {
    menuToggle.classList.toggle('active')
    showcase.classList.toggle('active')
    socialToggle.classList.toggle('active')
})

CSS

.social {
    position: fixed;
    bottom: 18px;
    right: 40px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social li {
    list-style: none;
}
.social-icon {
    display: inline-block;
    transform: scale(0.5);
    margin-right: 25px;
    transition: 0.5s;
    font-size: 40px;
    cursor: pointer;
}
.social-icon.active {
color: black;
}

HTML

            <div class="toggle"></div>

<ul class="social">
            <li class="social-icon"><i class="fab fa-facebook-f"></i></li>
            <li class="social-icon"><i class="fab fa-instagram"></i></li>
            <li class="social-icon"><i class="fab fa-tiktok"></i></li>
        </ul>

Answer 1

您可以使用querySelectorAll获取包含所有图标的节点列表，然后迭代它们:

const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
const socialToggle = document.querySelectorAll('.social-icon');
menuToggle.addEventListener('click', function() {
    menuToggle.classList.toggle('active');
    showcase.classList.toggle('active');
    socialToggle.forEach(function(el) {
        el.classList.toggle('active');
    });
})