Как изменить изображение 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 не строка, а список классов .

Просто используйте метод .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";

  }`