单击时更改字体真棒图标的颜色：CSS / JavaScript

Posted 2023-02-23

【中文标题】单击时更改字体真棒图标的颜色：CSS / JavaScript

【英文标题】：Changing color of Font Awesome icon on click: CSS / JavaScript

【发布时间】：2021-04-20 20:24:46

【问题描述】：

如果我在这里很愚蠢，请提前原谅我，但是当我使用 javascript 在我的网站上单击菜单以添加“活动”类时，我正在尝试将 3 个 Font Awesome 图标的颜色从白色更改为黑色在当前的“social-icon”类之上，以便激活 CSS。

我正在使用一个名为“切换”的 div 作为导航栏，目前只有第一个图标在单击时变为黑色。我尝试使用 querySelectorAll 来代替，但这不起作用，我还尝试将社交图标类移动到字体真棒图标类中，但又没有。我只是好奇我哪里出错了。

谢谢

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>

【问题讨论】：

querySelector 返回一个元素

你可以看看这里对你有帮助：How to change color of font-awesome icon by clicking the icon

【参考方案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');
    );
)