0

我正在慢慢地从 jQuery 到 vanilla JS，但是我正在努力用 JavaScript 编写以下内容，我是否必须为每个元素设置一个“for”循环？我如何将子元素定位为一个 ID？

这是我想了解的：

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

我了解文档 getElementById 来获取“#id”，但我将如何获得子 <li> 元素？以及如何让“onclick”功能适用于单击的任何列表元素？我是否必须为每个元素设置一个“for”循环？非常感谢任何帮助！

4

3 回答 3

2

这是一个 JSFiddle，可以满足您的要求：http:
//jsfiddle.net/digitalzebra/ZMXGC/10/

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

        target.className = "active";
    };

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

稍微解释一下是为了...

首先，我使用自执行函数来获取包装器 div，使用getElementById(). 这相当于在 jQuery 中使用 id 选择器：$('#id')

接下来，我使用该函数将点击处理程序附加到元素addEventListener()并传入一个事件类型click。

这将 click 处理函数绑定到 div 元素，就像 jQueryclick()一样。我正在使用一种称为事件冒泡的东西，其中包装器的任何子级上的单击事件将调用附加到包装器的单击处理程序。

一旦用户点击元素，我们的函数就会被调用。 originalTargetortarget是用户实际点击的元素，在这种情况下，它始终是li. 然后我将该元素上的类设置为活动状态。

于 2013-02-02T21:50:16.293 回答
1

这是上述问题的示例 http://jsfiddle.net/G3ADG/2/

    (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";
        })

    }
})();

好吧，我真的很喜欢 Polaris878 解决方案，因为他没有在其中使用任何循环。在我的解决方案中，首先使用 document.getElementById 获取 HTML 节点信息，这与 $("#id") 类似。比在下一步中我获取的所有标签类型的“li”是“id”的孩子，而不是在这个 li 标签数组上添加事件监听器来监听点击功能

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

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

于 2013-02-02T22:27:41.160 回答
0

这将起作用（IE >= 10），不想搜索 classList.add() 替换 IE<10，

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');
    });
}

小提琴

于 2013-02-02T22:03:22.407 回答