6

Как при клике на элемент из списка, добавить ему класс? При этом выбрать можно только 1 элемент

1
  • 1
    Установить обработчик клика на элементы, которые требуется обрабатывать, а в обработчике присваивать класс текущему элементу. Commented 15 сент. 2016 в 11:59

3 ответа 3

10

Например так (jq):

$('li').on('click', function(){
  $(this).toggleClass('active')
    .siblings()
    .removeClass('active');
});
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>El1</li>
  <li>El2</li>
  <li>El3</li>
</ul>

8

Так как выбрать можно только один, то при клике есть текущий активный элемент и элемент по которому щелкнули. Нужно просто применить к ним toggleClass

$('li').on('click', function() {
  $('.active').add(this).toggleClass('active');
});
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>El1</li>
  <li>El2</li>
  <li>El3</li>
</ul>

Если не нужно убирать выбранный, нужно проверить, что у элемента по которому щелкнули нет класса active

$('li').on('click', function() {
  if (this.classList.contains('active')) return;
  $('.active').add(this).toggleClass('active');
});
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>El1</li>
  <li>El2</li>
  <li>El3</li>
</ul>

И последний вариант без использования jQuery

[].forEach.call(document.querySelectorAll('li'), function(li) {
  var active = document.getElementsByClassName('active');
  li.addEventListener('click', function() {
    if (this === active[0]) this.classList.remove('active');
    else {
      if (active[0]) active[0].classList.remove('active');
      this.classList.add('active');
    }
  });
});
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>El1</li>
  <li>El2</li>
  <li>El3</li>
</ul>

И без использования jQuery без возможности снять выделение со всех

[].forEach.call(document.querySelectorAll('li'), function(li) {
  var active = document.getElementsByClassName('active');
  li.addEventListener('click', function() {
    if (active[0]) active[0].classList.remove('active');
    this.classList.add('active');
  });
});
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>El1</li>
  <li>El2</li>
  <li>El3</li>
</ul>

3

Примерно так:

$('#list li').click(function(){
    $(this).addClass('test-class');
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.