Блог

Я искал в Интернете простой ответ, и я не смог его найти. Потратил слишком много времени, пытаясь разобраться в этом, но я был бы признателен за любую помощь или правильное направление.

HTML

 <ul id="main-li">
     <li>item1</li>
     <li>item1</li>
     <li>item1</li>
</ul>
  

JavaScript:

 document.getElementById('main-li').addEventListener("click", function(e) {
  if (e.target amp;amp; e.target.nodeName === "LI") {
    e.target.classList.add("active-class");
  }
});
  

JSFiddle
https://jsfiddle.net/kw0rr3fv/1 /

По словам Дэвида Уоша: https://davidwalsh.name/event-delegate

Делегирование событий позволяет избежать добавления прослушивателей событий к определенным узлам; вместо этого прослушиватель событий добавляется к одному родительскому элементу. Этот прослушиватель событий анализирует события с пузырьками, чтобы найти совпадение с дочерними элементами

Каков наилучший способ удалить предыдущий активный класс при присоединении класса к выбранному элементу?

Единственный способ, который существует для удаления класса для каждого дочернего элемента UL, — это перебирать их.

Если вы хотите избежать таких фреймворков, как jQuery, вы можете просто добиться этого с помощью очень короткого кода:

 document.getElementById('main-li').addEventListener("click", function(e) {
    if (e.target amp;amp; e.target.nodeName === "LI") {
        let elements = document.getElementById('main-li').children;
        for (let i = 0; i < elements.length;   i) {
            elements[i].classList.remove("active-class");
        }
        e.target.classList.add("active-class");
     }
}, true);
  

Как вы видите, я только что добавил в ваш код очень короткий цикл, который удаляет класс (он не будет блокироваться, если у элемента нет класса).

В последней строке кода вы можете заметить, что я добавил true значение: это use capture и используется, чтобы предположить, что событие UL должно быть захвачено дочерними элементами LI.

Я обнаружил, что это сложнее, чем я ожидал. Является ли это распространенным способом установки активного класса?

Вы можете использовать фреймворк, такой как jQuery, который поможет вам сделать это быстрее и в кроссбраузерном режиме.

Каков наилучший способ удалить предыдущий активный класс при присоединении его к выбранному элементу?

Проверьте обновленную скрипку

 document.getElementById('main-li').addEventListener("click", function(e) {
  console.log(e);
  Array.prototype.slice.call(document.querySelectorAll('#main-li li')).forEach( function( obj ){
    obj.classList.remove("active-class");
  });
  if (e.target amp;amp; e.target.nodeName === "LI") {
    e.target.classList.add("active-class");
  }
});
  

Сначала вам нужно удалить класс из всех li, а затем продолжить добавление active-class

Я думаю, что следует сосредоточить внимание только на теге «li» и добавить прослушиватель событий в качестве моего простого кода и легко читаемого ниже.

 var elementsLi = document.querySelectorAll('ul#main-li > li');

for (var i = 0; i < elementsLi.length; i  ) {
    elementsLi[i].addEventListener('click', function(e) {
         // console.log(e.currentTarget); // for see the current element
         if (e.currentTarget.classList.contains('active-class')) {
              // do something if already have class "active-class"
              // remove class or blah blah blah
         }
         else {
              e.currentTarget.classList.add('active-class')
         }
    });
}
  

Надеюсь на ваш успех

Создана страница, которая добавляет класс «active» при каждом щелчке элемента «li».

 <style>
	.active { color: red; }
</style>

<ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
</ul>

<script>
var arr = document.getElementsByTagName("li");

for(var i=0; i<arr.length; i  ){
	arr[i].addEventListener("click", function(){
	
			for(var j=0; j<document.getElementsByTagName("li").length; j  ){
				document.getElementsByTagName("li")[j].className = "";
				event.target.className = "";
			};
	
		event.target.className = "active"
	});
}
</script>  

Вы также можете использовать Jquery для этого. это быстро и короче, чем ваш код.

 $(document).ready(function(){
$('#main-li').on('click',function(){
$(this).addClass('active-class').siblings().removeClass('active-class');
});
});