选择设备切换图片异常：切换其他设备后原图片无法自动恢复

问题分析 #

当前代码的问题在于，点击设备选项时仅切换当前选项的图片状态，未同步重置另一设备的图片状态。例如点击iOS时，只修改iOS的图片，不会将Android的图片恢复到初始状态，导致之前切换过的Android图片保持激活状态。

修改后的代码 #

HTML

<div class="devices">
    <div class="platform" id="platform0" onclick="device('platform0', 'Android')">
        <img src="https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png" class="devices-pic android" id="black-android" data-image="img1">
    </div>
    <div class="platform" id="platform1" onclick="device('platform1', 'Apple')">
        <img src="https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png" class="devices-pic ios" id="black-ios" data-image="pic1">
    </div>
</div>

CSS

.devices{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    float: none;
}

.platform{
    background: #FFFFFF;
    width: 12em;
    height: 3em;
    border-radius: 1em;
    padding-top: 1em;
    margin: 1em;
    box-shadow: 0 0 0.6em black;
    cursor: pointer;
}

.platform:hover{
    background:#FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 0 0.5em #31271c;
}

.devices-pic{
    width: 3em;
    margin: 0 4em;
}

.devices-pic.ios{
    margin: -0.5em 4.5em 0.2em 4.5em;
}

.devices-pic.android{
    width: 30%;
    margin: -0.5em 4em 0.2em 4em;
}

.selectedPlatform{
    background: grey;
    width: 12em;
    height: 3em;
    border-radius: 1em;
    padding-top: 1em;
    margin: 1em;
    box-shadow: 0 0 0.6em white;
    cursor: pointer;
}

JavaScript

// 统一管理图片的原始与激活状态URL
const imageUrls = {
    android: {
        original: "https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png",
        active: "https://cdn-icons-png.flaticon.com/512/61/61120.png?w=826&t=st=1660038595~exp=1660039195~hmac=2d02a98f85838b7382aa93176eb51e58e99aec95155d52cb082063ffb6395bc3"
    },
    ios: {
        original: "https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png",
        active: "https://www.freepnglogos.com/uploads/apple-logo-png/apple-logo-png-what-you-need-know-before-rebranding-11.png"
    }
};

function device(select, value){
    // 重置所有设备的样式状态
    document.getElementById("platform0").classList.add("platform");
    document.getElementById("platform1").classList.add("platform");
    document.getElementById("platform0").classList.remove("selectedPlatform");
    document.getElementById("platform1").classList.remove("selectedPlatform");

    // 设置当前选中设备的样式
    document.getElementById(select).classList.add("selectedPlatform");
    document.getElementById(select).classList.remove("platform");

    // 重置所有设备的图片到原始状态
    const androidImg = document.getElementById('black-android');
    const iosImg = document.getElementById('black-ios');
    androidImg.src = imageUrls.android.original;
    androidImg.dataset.image = "img1";
    iosImg.src = imageUrls.ios.original;
    iosImg.dataset.image = "pic1";

    // 切换当前选中设备的图片到激活状态
    if(value === 'Android'){
        androidImg.src = imageUrls.android.active;
        androidImg.dataset.image = "img2";
    } else if(value === 'Apple'){
        iosImg.src = imageUrls.ios.active;
        iosImg.dataset.image = "pic2";
    }
}

改进说明 #

1. 将图片URL统一管理，提升代码可读性与可维护性
2. 每次点击设备时先重置所有设备的图片到原始状态，再设置当前选中设备的激活状态，确保状态完全同步
3. 简化点击事件逻辑，仅调用一个函数即可完成样式与图片的切换，减少冗余代码

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