在循環內分配 onclick 事件

Question

使用循環內分配的 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();

     }
        };}

它按預期“工作”，但我必須按順序（從最后一個到第一個）單擊“TD”元素，否則會引發錯誤。 為什么會發生？ 工作演示http://jsfiddle.net/Trolstover/qxd32hkk/5/

Answer 1

對setTimeout的遞歸調用以處理轉換，以及添加到每個<td>的事件處理程序可能會給范圍帶來一些問題，並且某處的變量可能會在不應該被覆蓋時被覆蓋。

我簡化了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>

新的animacia()函數：

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

這是作為工作片段的完整代碼。

 window.onerror = function (m, u, l) { alert('Javascript Error: ' + m + '\\nURL: ' + u + '\\nLine Number: ' + l); return true; } var lol = document.getElementsByClassName("lol"); var kek = []; function matej() { var self = this; self.children = lol; self.before = []; self.after = []; self.shortIt(); self.nahrada(); self.animacia(); } matej.prototype.shortIt = function () { Array.prototype.forEach.call(this.children, function (element) { Array.prototype.forEach.call(element.children, function (td) { var range = document.createRange(); var span = document.createElement("span"); span.setAttribute("class", "hidden"); range.setStart(td.childNodes[0], 1); range.setEnd(td.childNodes[0], td.childNodes[0].length); range.surroundContents(span); }); }); }; matej.prototype.nahrada = function () { var skryty = document.getElementsByClassName("hidden"); Array.prototype.forEach.call(skryty, function (element) { var span = document.createElement("span"); var y = document.createTextNode("..."); span.appendChild(y); span.setAttribute("class", "bodky"); var tato = element.parentNode; tato.insertBefore(span, element); }); }; 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; }); } var sprav = new matej();

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

 <table style="width:100%" id="table"> <tr class="lol"> <td data-fact="true">Jill</td> <td data-fact="true">Jilla</td> <td data-fact="true">50</td> </tr> <tr class="lol"> <td data-fact="true">Eve</td> <td data-fact="true">Jackson</td> <td data-fact="true">94</td> </tr> </table>