Javascript 在循环内分配onclick事件

正在处理循环内部分配的onclick事件，但出现了问题

matej.prototype.animacia = function () {
 var tab = document.getElementById("table");
 var x = tab.querySelectorAll(".lol td");
var kontrola=true;
 for (var i = 0; i < x.length; i++) {
     x[i].onclick = function (e) {
         e = e ? e : window.event;
         var decko = e.target.querySelector(".bodky");
         var bastard = e.target.querySelector(".hidden");
         var hore = 0;

             kontrola=false;
         var id = function () {

             decko.style.opacity = 1 - hore;
             hore += 0.05;
             if (hore < 1) {
                 setTimeout(function () {
                     id();
                 }, 10);
             } else {
                 decko.style.display = "none";
                 decko.style.opacity = 0;
                 (function (e) {
                     e = e ? e : window.event;
                     var dole = 0;
                     var di = function () {
                         bastard.style.display = "inline";
                         bastard.style.opacity = 0 + dole;
                         dole += 0.05;
                         if (dole < 1) {
                             setTimeout(function () {
                                 di();
                             }, 100);
                         } else {
                             bastard.style.opacity = 1;
                         }

                     };
                     di();
                 })();
             }

         };
         id();

     }
        };}

matej.prototype.animacia=函数（）{
var tab=document.getElementById（“表”）；
var x=tab.queryselectoral（“.lol td”）；
var kontrola=真；
对于（变量i=0；i

它按预期“工作”，但我必须按顺序单击“TD”元素（从最后一个到第一个），否则它将抛出错误。为什么会这样？

---

工作演示

递归调用

setTimeout

来处理转换，以及添加到每个

的事件处理程序可能会在范围方面产生一些问题，并且某个变量可能会在不应该被覆盖的情况下被覆盖

我简化了

animacia（）

函数，将一个事件处理程序添加到表中，并使用

event.target

标识已单击的元素

此外，我还向样式表中添加了CSS转换，以便浏览器控制淡出和淡出动画，而不是使用JavaScript。淡出淡出序列由事件处理程序控制

新的CSS：

    <style>
        .hidden {
            display:none;
            opacity:0;
            transition:opacity 2s;
        }
        .bodky {
            opacity:1;
            display:inline;
            transition:opacity 200ms;
        }
        td{
            cursor:pointer;
            width:200px;
        }
    </style>

以下是完整的代码片段

window.onerror=函数（m、u、l）{
警报（'Javascript错误：'+m+'\nURL:'+u+'\n行号：'+l）；
返回true；
}
var lol=document.getElementsByClassName（“lol”）；
var-kek=[]；
函数matej（）{
var self=这个；
self.children=lol；
self.before=[]；
self.after=[]；
self.shortIt（）；
self.nahrada（）；
self.animacia（）；
}
matej.prototype.shortIt=函数（）{
Array.prototype.forEach.call（this.children，函数（元素）{
Array.prototype.forEach.call（element.children，function，td）{
var range=document.createRange（）；
var span=document.createElement（“span”）；
setAttribute（“类”、“隐藏”）；
range.setStart（td.childNodes[0]，1）；
range.setEnd（td.childNodes[0]，td.childNodes[0].length）；
范围。周围内容物（跨度）；
});
});
};
matej.prototype.nahrada=函数（）{
var skryty=document.getElementsByClassName（“隐藏”）；
Array.prototype.forEach.call（skryty，函数（元素）{
var span=document.createElement（“span”）；
var y=document.createTextNode（“…”）；
span.儿童（y）；
setAttribute（“类”、“bodky”）；
var tato=element.parentNode；
tato.insertBefore（跨度、元素）；
});
};
matej.prototype.animacia=函数（）{
//将事件侦听器添加到表中，以便只需要一个。
//使用event.target获取已单击的元素
表.addEventListener（'click'，函数（e）{
//获取我们将要消失的元素
设decko=e.target.nexist（'td'）.querySelector（'bodky'）；
让buster=e.target.nexist（'td'）.querySelector（'hidden'）；
//设置fadeOutFadeIn函数，以便以后易于识别
//这将由淡出元素上的transitionend事件调用
//它从显示中删除淡入的元素，添加新元素并开始淡入
设fadeOutFadeIn=函数（）{
decko.offsetHeight；//这将强制回流以确保显示过渡。
decko.style.display='none'；
display='inline'；
德科。远视；
.style.opacity=1；
decko.removeEventListener（'transitionend'，fadeOutFadeIn'）；
};
//将TransionEnd处理程序添加到将淡出的元素
decko.addEventListener（'transitionend'，fadeOutFadeIn'）；
//为淡出元素设置新的不透明度。CSS控制持续时间
decko.style.opacity=0；
});
}
var sprav=新材料（）
。隐藏{
显示：无；
不透明度：0；
过渡：不透明度2s；
}
博迪先生{
不透明度：1；
显示：内联；
过渡：不透明度200ms；
}
运输署{
光标：指针；
宽度：100px；
}

吉尔
吉拉
50
前夕
杰克逊
94
变量名真的描述了内容吗？当我在FF/Windows 7中尝试您的小提琴示例时，我不需要按顺序单击元素。我点击了rando
   matej.prototype.animacia = function () {

        // Add an event listener to the table so that only one is required.
        // Use event.target to get the element that was clicked
        table.addEventListener('click', function(e){
            // Get the elements we're going to fade
            let decko = e.target.closest('td').querySelector(".bodky");
            let bastard = e.target.closest('td').querySelector(".hidden");

            // Set up a fadeOutFadeIn function so that it's easy to identify later
            // This will be called by the transitionend event on our fadeOut element
            // It removes the faded element from display, add the new element and starts the fade In
            let fadeOutFadeIn = function(){
                decko.offsetHeight;  // This forces a reflow to ensure that the transition is displayed.
                decko.style.display = 'none';
                bastard.style.display='inline';
                decko.offsetHeight;
                bastard.style.opacity = 1;
                decko.removeEventListener('transitionend', fadeOutFadeIn);
            };

            // Add the transtionend handler to the element that will be faded out
            decko.addEventListener('transitionend', fadeOutFadeIn);
            // Set the new opacity for the fadeOut element. CSS controls the duration
            decko.style.opacity = 0;
        });
        }