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

Рейтинг: 0Ответов: 2Опубликовано: 10.03.2023

Делаю сайт и в бронировании места в кинотеатр и нужно чтобы при нажатии на место этот элемент менял цвет и если еще раз нажать(тобишь убрать бронь с этого места) элемент вернет себе прежний цвет

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 4

Без всяких лишних обработчиков:

.zal {
  border-collapse: collapse;
}

.place:not(.empty) {
  border: 1px solid #eee;
  position: relative;
}

.place:not(.empty) input {
  opacity: 0;
  position: relative;
  z-index: 1;
  margin: 0;
  display: block;
  width: 2em;
  height: 2em;
  cursor: pointer;
}

.place:not(.empty) .seat {
  background-color: #BCDDBD;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.place:not(.empty) input:checked+.seat {
  background-color: #DDBCBC;
}
<div>
  <table class="zal">
    <tr class="line">
      <td class="place empty"></td>
      <td class="place"><input type="checkbox" /><span class="seat">1</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">2</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">3</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">4</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">5</span></td>
      <td class="place empty"></td>
    </tr>
    <tr class="line">
      <td class="place empty"></td>
      <td class="place"><input type="checkbox" /><span class="seat">1</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">2</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">3</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">4</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">5</span></td>
      <td class="place empty"></td>
    </tr>
    <tr class="line">
      <td class="place"><input type="checkbox" /><span class="seat">1</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">2</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">3</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">4</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">5</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">6</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">7</span></td>
    </tr>
    <tr class="line">
      <td class="place"><input type="checkbox" /><span class="seat">1</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">2</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">3</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">4</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">5</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">6</span></td>
      <td class="place"><input type="checkbox" /><span class="seat">7</span></td>
    </tr>
  </table>
</div>

▲ 0

Вот простой пример как это может быть реализовано. Здесь мы просто добавляем и удаляем класс active а для класса active заранее в стилях указываем красный цвет

 const elements = document.querySelectorAll("#list li"); // находим все кнопки

elements.forEach((element) => { // проходимся циклом по массиву кнопок которые мы нашли
  element.addEventListener("click", () => { // и ставим прослушиватель на событие клик по элементу
    element.classList.toggle("active"); // у элемента есть свойство classList и у этого свойства есть метод toggle который добавляет класс который ты указал либо если такой класс присутствует он удаляет его. Тут я поверхностно объясняю желательно документацию про это прочитать https://code.mu/ru/javascript/manual/dom/classList/toggle/   https://www.w3schools.com/jsref/prop_element_classlist.asp
  })
})
 ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

li {
  background-color: black;
  padding: 10px;
  color: aliceblue;
  margin-right: 20px;
  cursor: pointer;
}
  /* указываем в стилях что при классе active у нас цвет красный */
li.active { 
  background-color: red;
}
<body>
  <ul id="list">
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
    <li>
      lorem
    </li>
  </ul>
</body>