HTML与JS图片src点击切换功能求助：扬声器图标无法来回切换

你的问题出在changeImage函数里——它每次点击只会把图标设置成静音状态，完全没处理切回原状态的逻辑。下面给你两种简单的修复方案：

方案一：通过判断当前图片路径切换 #

直接检查当前src包含的文件名，来决定切换到哪个图标：

let image = document.getElementById('myImage');

image.addEventListener('click', function(){
    changeImage();
});

function changeImage(){
    // 检查当前是否是静音图标
    if (image.src.includes('volume-mute-icons.png')) {
        // 切回正常扬声器图标
        image.src = 'images/images/speaker-icon.png';
    } else {
        // 切换到静音图标
        image.src = 'images/images/volume-mute-icons.png';
    }
}

方案二：用自定义属性记录状态（更可靠） #

如果担心路径判断出问题（比如浏览器可能把相对路径转成绝对路径），可以给图片加个自定义属性来记录当前状态：

先修改HTML，给img加data-muted属性：

<div class="tooltip" id="speakerbtn">
    <img src="images/images/speaker-icon.png" class="header-nav-button" id="myImage" data-muted="false">
    <span class="tooltiptext">Sound</span>
</div>

然后修改JS：

let image = document.getElementById('myImage');

image.addEventListener('click', function(){
    changeImage();
});

function changeImage(){
    // 获取当前静音状态
    const isMuted = image.dataset.muted === 'true';
    if (isMuted) {
        image.src = 'images/images/speaker-icon.png';
        image.dataset.muted = 'false';
    } else {
        image.src = 'images/images/volume-mute-icons.png';
        image.dataset.muted = 'true';
    }
}

这两种方案都能实现点击切换的效果，方案二更稳定，推荐使用。

内容的提问来源于stack exchange，提问作者Gavin Walsh