Question

我在jquery中编写了这个可以正常工作的内容：

$(document).delegate('i', 'click', function(_this){
    console.log(_this.target);
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
});

但我需要用纯粹的javascript制作它，没有jquery。

document.addEventListener("click",function(e) {
 if(e.target && e.target.nodeName == "I") {   
    console.log(e.target);
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
 }
});

这不起作用......我做错了什么？

Answer 1

循环遍历所有i并将事件绑定在元素上。

 Array.prototype.forEach.call(document.querySelectorAll("i"), function (elem) {
     elem.addEventListener("click", function (e) {
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
     });
 })

委托版本：

 document.addEventListener("click", function (e) {
        if (e.target && e.target.tagName.toLowerCase() == "i") {
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
        }
    });

javascript委托样式到元素

1 个答案: