почему тумблер работает только один раз для смены контента?

Question

const add = document.querySelector('i');
add.addEventListener('click', () => {
  add.classList.toggle('down');
  add.classList.toggle('up');
})

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

<button><i class="down"></button>

в этом коде я хочу создать кнопку со значением, то есть стрелкой вниз, и я успешно могу ее получить. далее я хочу, чтобы эта стрелка указывала вверх при нажатии, затем снова вниз при втором нажатии и так далее. для которого я написал javascript, который делает свою работу, как ожидалось в первый раз. но поздно на втором щелчке его не меняет свое направление вверх. пожалуйста, скажите мне, где я иду не так.

Answer 1

Ваш код работает нормально. Но есть только 1 проблема. Вы связываете событие click с элементом i. Поэтому вам нужно щелкнуть элемент i. Если вы нажмете на button, вы почувствуете, что событие не сработало.

Вы можете привязать событие щелчка к button, и с помощью document.querySelectorAll('#toggle-button i')[0] получить первого i дочернего элемента кнопки и переключать его классы.

const parent = document.getElementById("toggle-button");
const child = document.querySelectorAll('#toggle-button i')[0];
parent.addEventListener('click', () => {
  child.classList.toggle('down');
  child.classList.toggle('up');
})

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

<button id="toggle-button"><i class="down"></i></button>

Answer 2

Вы должны включить только одно имя класса ( вкл / выкл / вкл ). Таким образом, для <i> по умолчанию используется down (класс .down - css не требуется), а переключение выполняется для up. Упрощенный код до ( делегированного события ):

{
  document.addEventListener('click', evt => {
    let origin = evt.target;
    if (origin.dataset.toggleup) {
      origin.classList.toggle("up");
    }
  });
}

button div[data-toggleup] {
  padding: 3px;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

[data-toggleup].up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

div[data-demo] {
 width: 100px;
 height: 100px;
 border: 3px solid #999;
 margin-top: 1rem;
 padding: 5px;
}

<button><div data-toggleup="1"></div></button>

<div data-demo data-toggleup="1">Handler delegated, try clicking me</div>

Answer 3

Вы должны нажать на кнопку, а не на значок. Ваш курсор не всегда находится на значке.

const add = document.querySelector('button');
      add.addEventListener('click', () => {
        let icon = add.querySelector('i')
        icon.classList.toggle('down');
        icon.classList.toggle('up');
      }
    )

Answer 4

Как уже упоминали другие, вы просто добавляете прослушиватель событий к маленькому элементу i, который может быть сложно щелкнуть. Самый простой способ добавить прослушиватель событий к кнопке (родитель i) - просто набрать add.parentElement.addEventListener():

const add = document.querySelector("i");
add.parentElement.addEventListener("click", () => {
  add.classList.toggle("down");
  add.classList.toggle("up");
});

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

<button><i class="down"></i></button>

Answer 5

Вы пропустили закрывающий тег </i>.

const add = document.querySelector('.toggle');
add.addEventListener('click', (e) => {
  const button = e.currentTarget;
  const icon = button.children[0];
  icon.classList.toggle('down');
  icon.classList.toggle('up');
})

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

<button class="toggle"><i class="down"></i></button>