Question

我已经在网上搜索了一个直截了当的答案，我一直无法找到它。花了太长时间试图解决这个问题，但我感谢任何帮助或正确的方向。

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 && e.target.nodeName === "LI") {
    e.target.classList.add("active-class");
  }
});

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

据David Wash说：https://davidwalsh.name/event-delegate

事件委派允许您避免添加事件侦听器特定节点;相反，事件监听器被添加到一个父级。该事件监听器分析冒泡事件以找到对孩子的匹配元素

将类附加到所选元素时删除上一个活动类的最佳方法是什么？

Answer 1

我发现这比我预期的更具挑战性。这是常见的吗？设置活动类的方法？

您可以使用像jQuery这样的框架，它可以帮助您更快地以跨浏览器方式实现。

删除之前的活动类的最佳方法是什么将它附加到选定的元素？

检查更新后的fiddle

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 && e.target.nodeName === "LI") {
    e.target.classList.add("active-class");
  }
});

您需要首先从所有li中删除该课程，然后继续添加active-class

Answer 2

将一个类移除到UL的每个子节点的唯一方法是迭代它们。

如果你想避免像jQuery这样的框架，你可以用一个非常短的代码来实现它：

true

如您所见，我刚刚为您的代码添加了一个非常短的循环来删除该类（如果该元素没有该类，它将不会阻塞。）

在最后一行代码中，您可能会注意到我添加了{{1}}值：这是使用捕获，用于表示必须由LI子级捕获UL事件。

Answer 3

我认为应该只关注标签“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')
         }
    });
}

希望你的成功：）

Answer 4

您也可以使用Jquery。这比你的代码更快，更短。

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

Answer 5

在每个“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>

如何在用户单击时在特定“li”上添加活动类

5 个答案: