AddEventListener用于循环关闭
[英]AddEventListener for loop closure
问题描述
Before I get linked to anything, I want you to know that I have read plenty about my issue. 
在我链接到任何东西之前，我想让你知道我已经阅读了很多有关我的问题的文章。 And I know this question's title will probably be edited to duplicate, which am completely okay with if I end up getting a solution & explanation to my problem. 而且我知道此问题的标题可能会被编辑为重复，如果最终得到解决方案和对我的问题的解释，那完全可以。
So I have a table and wanted to change the names of the headers, on the click of them. 因此，我有一张桌子，想单击标题即可更改标题的名称。 What I basically want is whenever I click on one of the headers. 我基本上想要的是每当我单击标题之一时。 I want to take its innerHTML and make it a textbox's value. 我想使用它的innerHTML并使其成为文本框的值。
I have been trying to do this with a for loop without success. 我一直在尝试使用for循环来完成此操作，但未成功。 Each time I click on any of the headers and my textbox is filled with the last header. 每次我单击任何标题时，我的文本框都会填充最后一个标题。 I already have a working version of my code with individual click events functions for each, but I think it would be possible with a for loop & a closure. 我已经有了代码的工作版本，每个代码都有单独的单击事件函数，但是我认为使用for循环和闭包是可能的。
/*/ =========================================================== /*/ for (var i = 1; i < 4; i++) { document.getElementById('H' + i).addEventListener("click", HeaderClicked); console.log("TH " + i + " click event added!"); for (var x = 0; x < 2; x++) { function HeaderClicked() { headerText.focus(); headerText.value = tableHeaders[x].innerHTML; console.log("TH clicked"); console.log("X is " + x); } } } /*/ =========================================================== /*/ document.getElementById('Rename').addEventListener("click", Renaming); var tableHeaders = [document.getElementById("H1"), document.getElementById("H2"), document.getElementById("H3") ]; var headerText = document.getElementById("headerText"); function Renaming() { var newName = document.getElementById("newName").value; var addRowLabel = document.getElementById("addRowLabel"); switch (headerText.value) { case tableHeaders[0].innerHTML: tableHeaders[0].innerHTML = newName; addRowLabel.innerHTML = "Data(" + newName + " " + tableHeaders[1].innerHTML + " " + tableHeaders[2].innerHTML + ")"; console.log("Header 1 changed!"); break; case tableHeaders[1].innerHTML: tableHeaders[1].innerHTML = newName; addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + newName + " " + tableHeaders[2].innerHTML + ")"; console.log("Header 2 changed!"); break; case tableHeaders[2].innerHTML: tableHeaders[2].innerHTML = newName; console.log("Header 3 changed!"); addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + tableHeaders[1].innerHTML + " " + newName + ")"; break; default: console.log("Name doesn't exist"); } }
<!doctype html> <html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <table id="myTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> <thead> <tr> <th id="H1" class="mdl-data-table__cell--non-numeric">ClickMe1</th> <th id="H2">ClickMe2</th> <th id="H3">ClickMe3</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> <td>25</td> <td>$2.90</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> <td>50</td> <td>$1.25</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> <td>10</td> <td>$2.35</td> </tr> </table> <div id="Controls"> <br> <div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="headerText" autocomplete='off' /> <label class="mdl-textfield__label" for="CurrentName">Header name</label> </div> - <div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="newName" autocomplete='off' /> <label class="mdl-textfield__label" for="NewName">Header New Name</label> </div> <button id="Rename" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Rename </button> </div> </body> </html> <style> button { margin: 10px 5px 5px 10px; } table { margin: 10px 5px 5px 10px; } #SmallerLabels { width: 140px; } #Controls { margin: auto 5px auto 10px; } </style>
1 个解决方案
解决方案1
2 已采纳 2015-07-11 19:40:33
Have you tried something like this? 你尝试过这样的事情吗？
var headerText = document.getElementById("headerText");
for (var i = 1; i < 4; i++) {
(function(index){
document.getElementById('H' + index).addEventListener("click",
function(){
headerText.focus();
headerText.value = this.innerHTML;
});
})(i);
}
Basically, the idea is to create an IIFE to capture the scope of the loop variables within a closure. 基本上，这个想法是创建一个IIFE来捕获闭包内循环变量的范围。
Also note you don't need to have an array storing all header nodes, since you can get them from the click handler context with this . 还要注意，您不需要具有存储所有标头节点的数组，因为您可以使用this从点击处理程序上下文中获取它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.