javascript - 当父级具有 "selected"类时如何更改图像 src？

Question

我试图通过查看父类以查看它是否在其中“选择”来更改图像。我有一些代码将“selected”类添加到“platform-selection”类。

<div class="platform-selection selected">
    <div style="margin: 5px;">
        <img src="xbox1.png" id="xbox" />
     </div>
</div>

    var xboxselected = document.getElementById("xbox").parentElement.parentElement.classList;
    if(xboxselected = "selected")
        {
           document.getElementById("xbox").src="xbox2.png";
        }
        else
        {
            document.getElementById("xbox").src="xbox1.png";
        }

我想仅当其父级具有“选定”类时才将图像更改为 xbox2.png。我立即得到了 xbox2.png

Answer 1

if(xboxselected = "selected")

应该是

if (xboxselected.contains("selected"))

= 是赋值，不是比较。要比较事物是否相等，您可以使用 ===(或 ==)，但这在这里没有意义，因为 xboxselected 不是字符串，而是一个 class list .

只需使用它的.contains 方法即可。

---

就是说，如果您只想根据父元素的类显示不同的图片(并且图片应该在类更改时“实时”更改)，您可以只使用 CSS:

document.getElementById('demo').onclick = function () {
    document.querySelector('.platform-selection').classList.toggle('selected');
};

.platform-selection img.alternative {
    display: none;
}

.platform-selection.selected img {
    display: none;
}

.platform-selection.selected img.alternative {
    display: block;
}

<div class="platform-selection">
    <div style="margin: 5px;">
        <img src="https://i.imgur.com/1aCFcDj.jpg">
        <img src="https://i.imgur.com/rmPqh.gif" class="alternative">
     </div>
</div>

<button id="demo">Toggle selection</button>

有两张图片。我们最初使用 CSS 来隐藏其中之一(具有 alternative 类的)。每当父元素获得 selected 类(此处由切换按钮提供)时，它会隐藏(通常可见的)包含的图像并显示(通常隐藏的)alternative 图像。