Question

当单击汉堡菜单时，我想用另一个SVG图像更改品牌徽标颜色（src），因为背景不合适。

OnClick汉堡将品牌徽标更改为另一张图片

我该怎么办？

我知道如何更改事件。监听被单击的元素，而不是我需要的其他元素

const navSlide = () => {
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.header__links');
const navLinks = document.querySelectorAll('.header__links a');   

hamburger.addEventListener('click', () => {
    // toggle nav
    nav.classList.toggle('header__nav-active');

    // animate links 
    navLinks.forEach((a, index) => {
        if (a.style.animation) {
            a.style.animation = '';
        } else {
            a.style.animation = `navLinkFade 0.5s ease forwards ${index / 6 + 0.3}s`;
            a.style.color = `#ffffff`;
        }
    });
});
}

 navSlide();

我有以下JS代码。我需要在点击汉堡包上更改徽标，否则，请保持不变。

Answer 1

类似的东西可以帮助您：

hamburger.addEventListener('click', () => {
    document.querySelector('.yourBrandLogoImg').src = "some/path/to/logo.svg";
}

如果您要切换此src，则可以执行以下操作：

hamburger.addEventListener('click', () => {

    if (nav.classList.contains('header__nav-active')){
        document.querySelector('.yourAnotherImg').src = "some/path/to/anotherImg.svg";
    }else{
        document.querySelector('.yourBrandLogoImg').src = "some/path/to/yourLogo.svg";
}

Answer 2

我假设logo在hamburger容器之外。这是更改图像的代码：

https://codepen.io/NehhaSharma/pen/QWWqxXL?editors=1010

谢谢

单击汉堡菜单时，如何更改徽标src？

2 个答案: