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不是字符串，而是What is the appropriate action when the answer to a question is added to the question itself?。

只需使用其.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图像。

Answer 2

var xboxselected = document.getElementById("xbox").parentElement.parentElement.classList;

这将返回一个类数组。您需要检查selected是否存在于ClassList中。

if(xboxselected.value.indexOf("selected") > -1){

   document.getElementById("xbox").src="xbox2.png";

 } else {

   document.getElementById("xbox").src="xbox1.png";

  }`

父级“选择”类时如何更改图像src？

2 个答案: