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

Question

[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, а при повторном клике на элемент возвращать класс и содержимое по умолчанию?

Answer 1

[Lorem Ipsum]

Как вариант))

<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>

Comments

[ettychel]

ну такое себе.
засорять html как то не оч.
Основываться на том какой класс сейчас ну ок.
Брать данные из html ну вообще не оч, а если пользователь откроет html и сменит на нужное ему?

[Lorem Ipsum]

ettychel, согласен. я предложил самую простую реализацию

Answer 2

[ettychel]

по мне так это самый правильный вариант, если использовать jQuery

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

Поиграться можно тут)