Я новичок в stackoverflow, и я начал изучать js всего несколько недель назад, вот код:

 'use strict'; 
 let a = 1;
 king.addEventListener('click', function(){
     a++;
     if(a%2 == 0){
         king.classList.remove(?)
         king.classList.add(?)
     }
     else {
         king.classList.remove(?)
         king.classList.add(?)
 
     }
 });

A -> counter, king - это div, у меня есть две фотографии с именами king0 и king1 в папке с фотографиями.

Задача = при нажатии на король переключается на второй рисунок, -> первый рисунок и т. Д.

Question = как мне вставить фотографии в "?", хотя, возможно, я все сделал не так, и мне придется начинать все сначала

Ну, html был запрошен, но его очень простой:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">  
        <title>DOC</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id = "king" class = "kingcss"> //kingcss class is empty
        <img src= "pics/king0.png"> </div>
        <script src="script.js"></script>
    
    </body>  
</html>
 
0
Курносов Павел 15 Окт 2021 в 21:04

2 ответа

Лучший ответ

classList не содержит ваших изображений напрямую; вместо этого это список имен классов CSS, примененных к элементу. Вы можете связать изображения с этими классами в CSS:

let a = 0;
let king = document.querySelector('.king')

king.addEventListener('click', function() {
  a++;
  if (a % 2 == 0) {
    king.classList.add('one')
    king.classList.remove('two')
  } else {
    king.classList.add('two')
    king.classList.remove('one')
  }
});
.king {
  width: 100px;
  height: 100px;
  border: 2px solid;
}

.one {
   background-image: url('http://placekitten.com/101/101')
}

.two {
   background-image: url('//placekitten.com/100/100')
}
<div class="king">King</div>

Я собираюсь предложить несколько упрощений, которые вы могли бы внести в свой код, помимо того, чтобы заставить его работать:

  • Здесь вы зависите от глобальной переменной a, чтобы отслеживать, на какое изображение вы хотите переключиться следующим. Это не обязательно и дает вам еще одну вещь, за которой нужно следить - вместо этого было бы лучше просто проверить текущее состояние элемента.
  • Вы включаете один класс, а другой - выключаете, что означает, что на самом деле у вас есть четыре возможных состояния (первое включено, второе включено, оба включены или оба выключены), если что-то идет не так. (Вы можете увидеть это в приведенном выше примере; до того, как пользователь щелкнет, он находится в состоянии «оба выключены»). На самом деле вам нужны только два возможных состояния: изображение первое или изображение два.

Ниже приведен пример решения этих проблем: вместо тестирования a вы тестируете содержимое classList; и вместо того, чтобы переключать несколько классов, одно из изображений находится в состоянии «по умолчанию».

let king = document.querySelector('.king')

king.addEventListener('click', function() {
    king.classList.toggle('two')
});
.king {
  width: 100px;
  height: 100px;
  border: 2px solid;
  background-image: url('http://placekitten.com/101/101')
}

.two {
  background-image: url('//placekitten.com/100/100')
}
<div class="king">King</div>
1
Daniel Beck 15 Окт 2021 в 18:41

Пожалуйста, добавьте свой HTML. Не все так. Не глядя на ваш HTML, я предполагаю, что у вас есть другой тег изображения для king0 и king1. Если вы хотите использовать classList.remove () или classList.add (), вы должны указать имя класса, которое вы добавляете или удаляете из узла classList.

-2
Jade 15 Окт 2021 в 18:18