Как выбрать элемент?

#javascript #jquery #веб_программирование

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

Ответы

Ответ 1

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



$('li').on('click', function() {
  $('.active').add(this).toggleClass('active');
});
.active {
  background: red;
}


  
El1
  
El2
  
El3





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



$('li').on('click', function() {
  if (this.classList.contains('active')) return;
  $('.active').add(this).toggleClass('active');
});
.active {
  background: red;
}


  
El1
  
El2
  
El3





И последний вариант без использования 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;
}


  
El1
  
El2
  
El3





И без использования 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;
}


  
El1
  
El2
  
El3



Ответ 2

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



$('li').on('click', function(){
  $(this).toggleClass('active')
    .siblings()
    .removeClass('active');
});
.active {
  background: red;
}


  
El1
  
El2
  
El3



Ответ 3

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

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