当父有“选中”类时，如何更改图像src？

Posted 2021-03-29

我试图通过查看父类来更改图像，以查看它是否已“选中”。我有一些代码将“选定”类添加到“平台选择”类。

<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

答案

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>

另一答案

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

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

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

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

 } else {

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

  }`

以上是关于当父有“选中”类时，如何更改图像src？的主要内容，如果未能解决你的问题，请参考以下文章

仅当父元素具有特定类时才为列表项元素设置样式[重复]

选择单元格以导航另一个视图控制器类时如何更改渐变单元格图像颜色

如何更改谷歌地图标记上方的标题和片段设计

如何使用javascript更改div中的图像src？

仅当元素具有两个特定类时如何在元素上触发函数

如何在更新父有状态小部件时更新子有状态小部件