@venaf34228

Как при клике на элемент изменять его класс и содержимое, а при повторном клике возвращать обратно?

Добрый день!
<span class="badge bg-danger" style="cursor: pointer;">150</span>
<span class="badge bg-danger" style="cursor: pointer;">250</span>
<span class="badge bg-danger" style="cursor: pointer;">350</span>
<span class="badge bg-danger" style="cursor: pointer;">450</span>

Как к каждому span привязать 2 числа (у каждого элемента эти числа собственные), например 150 по умолчанию и 200 отображать при клике на этот элемент, а так же изменять class на badge bg-success, а при повторном клике на элемент возвращать класс и содержимое по умолчанию?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
GeorgeGeorge
@GeorgeGeorge
Студент
Как вариант))
<span class="badge bg-danger" onclick="changeBadge(150, 200)" style="cursor: pointer;">150</span>
  <span class="badge bg-danger" onclick="changeBadge(250, 255)" style="cursor: pointer;">250</span>
  <span class="badge bg-danger" onclick="changeBadge(350, 235)" style="cursor: pointer;">350</span>
  <span class="badge bg-danger" onclick="changeBadge(450, 225)" style="cursor: pointer;">450</span>
  <script>

    const changeBadge = (oldContent, newContent) => {
      
      const badge = event.target

      if (badge.classList.contains('bg-danger')) {
          badge.classList.add('bg-success')
          badge.classList.remove('bg-danger')
          badge.innerHTML = newContent
      } else {
          badge.classList.remove('bg-success')
          badge.classList.add('bg-danger')
          badge.innerHTML = oldContent
      }
    }
  </script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ettychel
по мне так это самый правильный вариант, если использовать jQuery

Правильнее всего хранить в data самого элемента его состояние и исходя из его значения принимать какие либо действия

Поиграться можно тут)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы