Как изменить src изображения, когда у родителя есть "выбранный" класс?

#javascript #dom

Вопрос:

Я пытаюсь изменить изображение, посмотрев на родительский класс, чтобы увидеть, есть ли в нем «выбранный». У меня есть некоторый код, который добавляет «выбранный» класс в класс «выбор платформы».

 <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

Ответ №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 изображение.

1. Это работает, когда я добавляю «выбранный» класс, и он работает только один раз в начале. Нужен ли мне цикл или что-то еще для его работы?

2. @hexer34 зависит от того, когда вы хотите выполнить проверку. Почему у вас есть код, который selected вообще добавляет? Почему бы просто не изменить изображение?

3. У меня есть еще два таких раздела с «выбором платформы», и когда я нажимаю на первый, он удаляет «выбранный» класс из другого. У меня есть атрибут transform в css для масштабирования, чтобы анимировать его при выборе.

4. @hexer34 Это похоже на то, что вы можете делать полностью без JavaScript. Вероятно, вам просто понадобится какой-то переключатель, который будет изменен с помощью CSS.

5. полезный, спасибо за поддержку.

Ответ №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";

  }`