繁体   English   中英

在循环内分配 onclick 事件

Assign onclick event inside loop

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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>

1 在for循环内分配变量

我试图做一个简单的for {}循环,但在循环内分配变量时遇到问题。 我将尝试通过示例进行解释: 因此输出应如下所示: 任何人? 提前致谢 ...

3 如何在循环内分配值?

我想在循环的条件语句中分配一个值。 有什么办法可以做到吗? 我想尝试类似的方法: ...

2018-07-10 22:16:26 1 29   python
4 在循环内分配对象

循环分配以创建多个对象是否正确? 在我的项目中,我在数个uiscrollview面板中创建了数百个小标签。 即使我在这些标签上调用了release方法,但在进行手势操作时,即使在对视图进行栅格化处理后,我的表现也会很差。 像所有这些标签一样,感觉仍然在那里,等待从内存中清除。 因 ...

5 如何使用for循环内分配的值

我在循环外声明变量setPassword ,然后在循环内给它一个值。 然后,在下一个do-while循环中,我尝试使用分配的值,但显示“使用未分配的局部变量”。 profile[I]是在循环之前创建的对象数组。 在循环中分配的值是否未保存,或者profile[I].Password的值是 ...

2017-01-19 15:36:10 5 97   c#/ loops
6 在foreach循环内分配值

想象一下按姓名排序的联系人数组。 该数组可以像这样输出: 我想做的是为每个具有不同起始字母的li指定一个标题,例如显示A,B,D ... 在普通的编程语言中,我将定义一个包含名称首字母的变量,并在foreach循环中进行检查以查看其是否不同。 如果是这种情况,则显示标题。 ...

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM