使用循环内分配的 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/

#1楼 票数:0

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>

  ask by user3424358 translate from so

未解决问题?本站智能推荐:

2回复

无法在自定义dojo小部件内分配onclick事件

我有一个自定义窗口小部件,其定义与此类似: 如您所见,我试图在自定义窗口小部件的一部分上分配一个onclick事件。 我正在以编程方式创建小部件,并将其推到类似于以下内容的页面上: 不幸的是,在启动方法中连接的onclick事件没有触发。 我尝试以各种方式分配它,但似乎没有任何效果。
1回复

如何在ng-repeat循环内分配angularjs事件侦听器?

我是angularjs的新手。 我正在尝试创建一个图片库,其中初始页面是一张用angularjs ng-repeat循环创建的来自twitter和instagram的缩略图照片。 当用户将鼠标悬停在图像上时,图像会褪色,并出现一个按钮供用户单击。 我使用ng-mouseenter和ng-m
7回复

Javascript-在循环中动态分配onclick事件

我有一个非常简单的带有js代码的html页面: 该页面绑定了10个按钮,但是当您单击任何按钮时,它始终显示警报“ option9”。 如何分配onclick事件以显示对应的选项!? 谢谢!
1回复

值在循环内分配json值被覆盖

我如何产生这样的东西? 我在“饮料”对象下产生多个对象时遇到问题。 它被我的以下代码覆盖: http://jsfiddle.net/jLgh4at5/
3回复

JS:根据条件在for循环内分配变量值

我需要添加 和 取决于d1 and d2的值,但我不确定自己在做什么错。 if语句用作过滤器,则将仅允许分配给d1或d2那些值,例如,如果d1=1 ,则仅打印表中带有1的值,而不是所有值。
1回复

Javascript在循环时在数组内分配新变量

//我试图让数组颜色中的每个元素都被分配一个不同的颜色,但是当我运行这个时,一些元素被更改为颜色名称,而有些则不是,也可以为此切换更好,如果是这样的话?
1回复

如何在循环内分配多个localstorage变量?[关闭]

我不熟悉localstorage ...我需要在循环内分配一个localstorage变量...例如: 我试图这样做,但无法正常工作...编译器说: JavaScript错误:TypeError:无法设置未定义的属性“ 0” 另外,我需要用普通的javascript,没有jquery
4回复

For循环中的onClick事件

我试图创建一个带有for的循环,并通过onclick事件递增,但它不起作用。 js的一部分: 但在这种情况下,在我能够单击列表的元素之前,For循环已经完成。 此外,我想获取我点击的项目列表并将其保存在阵列上。 我尝试了一个gameCase [this](在onclick函数中),