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

【问题标题】：How to change logo src, when clicked on hamburger menu?单击汉堡菜单时如何更改徽标src？
【发布时间】：2019-10-31 00:49:17
【问题描述】：

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

OnClick 汉堡用另一张图片更改品牌标志

我该怎么做？

我知道如何用 event.listener 改变被点击的元素，而不是我需要的其他元素

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 代码。我需要更改点击汉堡的标志，否则，保持不变。

【问题讨论】：

你可以使用纯 CSS tutorialrepublic.com/…
感谢您的帮助，但事实并非如此，正如我所说，当我单击汉堡菜单图标时，我需要用另一个图像更改另一个元素徽标 (src)。
你可以发布HTML代码吗？
在您写问题时考虑遵循 minimum-reproducible-example link，否则我们无法为您提供帮助
当点击eventHandler被触发时尝试document.querySelector('.logoClass').src = "Images/New-Image-Source.png";

标签： javascript html css

【解决方案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";
}

【讨论】：

我刚刚评论了完全相同的事情，但不确定它是否会起作用，所以没有发布答案。 +1 给你
这会起作用，但我认为作者想在点击汉堡时切换这个 src，但不确定

【解决方案2】：

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

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

谢谢

【讨论】：