當父有“選中”類時，如何更改圖像src？

Question

我試圖通過查看父類來更改圖像，以查看它是否已“選中”。 我有一些代碼將“選定”類添加到“平台選擇”類。

<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不是字符串，而是類列表 。

只需使用它的.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存在於班級列表與否。

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

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

 } else {

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

  }`