用JavaScript编写这个jQuery单击函数

我正在慢慢地从jQuery过渡到vanilla JS，但是我很难用JavaScript编写以下内容，我是否需要为每个元素设置一个“for”循环？如何将子元素作为ID的目标

以下是我想了解的：

$('#id li').click(function(){
    $(this).addClass('active');
});

---

我理解文档getElementById获取“#id”，但如何获取子

元素呢？我如何让“onclick”函数对任何单击的列表元素起作用？我需要为每个元素设置一个“for”循环吗？非常感谢任何帮助

这里有一个JSFIDLE，它可以满足您的需要：

一点点的解释是为了

首先，我使用一个自执行函数来获取包装器div，使用

getElementById（）

。这相当于在jQuery中使用id选择器：

$（“#id”）

接下来，我将使用函数

addEventListener（）

将一个click处理程序附加到元素上，并传入事件类型

click

这将click handler函数绑定到div元素，与jQuery的

click（）

一样。我使用了一种称为事件冒泡的方法，其中包装器的任何子级上的单击事件都将调用附加到包装器上的单击处理程序

---

一旦用户单击元素，就会调用我们的函数

originalTarget

或

target

是用户实际单击的元素，在本例中始终是

li

。然后，我将该元素上的类设置为active。

这里有一个JSFIDLE，它可以满足您的需要：

一点点的解释是为了

首先，我使用一个自执行函数来获取包装器div，使用

getElementById（）

。这相当于在jQuery中使用id选择器：

$（“#id”）

接下来，我将使用函数

addEventListener（）

将一个click处理程序附加到元素上，并传入事件类型

click

这将click handler函数绑定到div元素，与jQuery的

click（）

一样。我使用了一种称为事件冒泡的方法，其中包装器的任何子级上的单击事件都将调用附加到包装器上的单击处理程序

---

一旦用户单击元素，就会调用我们的函数

originalTarget

或

target

是用户实际单击的元素，在本例中始终是

li

。然后，我将该元素上的类设置为活动。

这将起作用（IE>=10），不希望搜索类列表。为IE添加（）替换将起作用（IE>=10），不希望搜索类列表。为IE添加（）替换上面的问题

（函数（）{
var id=document.getElementById（“id”）；
var liele=id.getElementsByTagName（“li”）；
对于（变量i=0；i

我真的很喜欢Polaris878解决方案，因为他没有在里面使用任何环路。在我的解决方案中，首先使用document.getElementById获取HTML节点信息，其工作原理类似于$（“#id”）。在下一步中，我将获取“li”的所有标记类型，它们是“id”的子项，然后在此li标记数组上添加事件侦听器以侦听单击功能

className是允许在该节点上添加类的属性之一

---

我已经在mozilla和chrome中测试了上述代码，下面是上述问题的示例

（函数（）{
var id=document.getElementById（“id”）；
var liele=id.getElementsByTagName（“li”）；
对于（变量i=0；i

我真的很喜欢Polaris878解决方案，因为他没有在里面使用任何环路。在我的解决方案中，首先使用document.getElementById获取HTML节点信息，其工作原理类似于$（“#id”）。在下一步中，我将获取“li”的所有标记类型，它们是“id”的子项，然后在此li标记数组上添加事件侦听器以侦听单击功能

className是允许在该节点上添加类的属性之一

---

我已经在mozilla和chrome中测试了上面的代码

为什么您需要使用您命名的vanilla js（DOM+语言标准）？事实并不是jquery不好，事实是，如果您自己编写库，那么有70%的可能性，您的库将比jquery工作得更差。是的，您需要遍历找到的元素。检查jquery源代码。要搜索，请使用dom函数，这就是我请求人们提供帮助的原因？你明白我的问题了吗？我通过jQuery.HTML学习javascript，CSS也在不断变化。我不明白你的意思，那肯定是有争议的。如果你真的想掌握一些东西，那么了解它的内部结构并不是浪费时间。是的，了解它在引擎盖下是如何工作的绝不是浪费时间。在这种情况下，学习DOM的工作原理对于成为一名优秀的web开发人员至关重要。jQuery是一个很棒的库，但知道幕后发生了什么却不会有什么坏处。为什么需要使用名为vanilla js（DOM+语言标准）的东西？事实并不是jquery不好，事实是，如果您自己编写库，那么有70%的可能性，您的库将比jquery工作得更差。是的，您需要遍历找到的元素。检查jquery源代码。要搜索，请使用dom函数，这就是我请求人们提供帮助的原因？你明白我的问题了吗？我通过jQuery.HTML学习javascript，CSS也在不断变化。我不明白你的意思，那肯定是有争议的。如果你真的想掌握一些东西，那么了解它的内部结构并不是浪费时间。是的，了解它在引擎盖下的工作原理从来都不是一件容易的事

(function() {
    var wrapper = document.getElementById("id");
    var clickFunc = function(event) {
        var target = event.originalTarget || event.target;

        target.className = "active";
    };

    wrapper.addEventListener("click",clickFunc);
})();

var elems = document.querySelectorAll('#id li');
for (var i = 0; i < elems.length; i++) {
    var elem=elems[i];
    elem.addEventListener("click", function (e) {

        this.classList.add('active');
    });
}

    (function() {
    var id = document.getElementById("id");
    var liele = id.getElementsByTagName("li");
    for (var i = 0; i < liele.length; i++) {
        liele[i].addEventListener("click", function () {
            this.className = "active";
        })

    }
})();