我是javascript新手，可以从下面的代码中看出来。我想为页面上的6个按钮创建事件处理程序。单击按钮后，按钮下方的代码块的显示属性将从“无”更改为“块”。为此，我需要将每个按钮与html的单个部分相关联（在这种情况下，具有唯一ID的标签-pt1，pt2等）。
我为此苦了一段时间，并获得了下面的代码。那就是问题！事实证明，我要这样做完全是错误的。但是，作为一个新手，当它起作用时，我认为我正在做某事。当我花了几个小时在做这些事情时，我需要知道为什么下面的代码起作用了（这样我就会觉得自己学到了东西）。我将重点介绍代码的一部分，因为我一生都无法锻炼代码的工作原理。
var buttons = document.getElementsByClassName("CSS");
for (var i = 0; i < buttons.length; i++) {
// Generate strings associated with the button ids and the event handlers for each button
var buttonID = "button" + i;
var clickHandlerID = "clickHandler" + i;
var buttonEH = document.getElementById(buttonID);
// Identify the button elements by id
// As clickHandlerID is a string, to get the browser to recognise it as a function name
var clickHandler = window[clickHandlerID];
buttonEH.addEventListener("click", clickHandler, false);
}
/*****************************************************************************/
// Why does this work?
// clickHandler1, clickHandler2, etc are not referenced in my event handler.
// My botched attempt to create them in the event handler (var clickHandler = window[clickHandlerID];)
// resulted in "undefined" values (from console.log(clickHandler)).
// Yet it worked?!?! (I did eventually find the correct approach, a simple 10 line solution,
// but I am troubled that I don't understand what is going on here. Any help would be greatly appreciated!!)
/*****************************************************************************/
function clickHandler1 () {
if (pt1.style.display === "block") {
pt1.style.display = "none";
} else {
pt1.style.display = "block";
}
}
function clickHandler2 () {
if (pt2.style.display === "block") {
pt2.style.display = "none";
} else {
pt2.style.display = "block";
}
}
var buttons = document.getElementsByClassName("CSS");
for (var i = 0; i < buttons.length; i++) {
// Generate strings associated with the button ids and the event handlers for each button
var buttonID = "button" + i;
var clickHandlerID = "clickHandler" + i;
var buttonEH = document.getElementById(buttonID);
// Identify the button elements by id
// As clickHandlerID is a string, to get the browser to recognise it as a function name
var clickHandler = window[clickHandlerID];
console.log(clickHandler);
buttonEH.addEventListener("click", clickHandler, false);
}
/*****************************************************************************/
// Why does this work?
// clickHandler1, clickHandler2, etc are not referenced in my event handler.
// My botched attempt to create them in the event handler (var clickHandler = window[clickHandlerID];)
// resulted in "undefined" values (from console.log(clickHandler)).
// Yet it worked?!?! (I did eventually find the correct approach, a simple 10 line solution,
// but I am troubled that I don't understand what is going on here. Any help would be greatly appreciated!!)
/*****************************************************************************/
function clickHandler0 () {
if (pt0.style.display === "block") {
pt0.style.display = "none";
} else {
pt0.style.display = "block";
}
}
function clickHandler1 () {
if (pt1.style.display === "block") {
pt1.style.display = "none";
} else {
pt1.style.display = "block";
}
}
function clickHandler2 () {
if (pt2.style.display === "block") {
pt2.style.display = "none";
} else {
pt2.style.display = "block";
}
}#pt0, #pt1, #pt2, #pt3 {
display: none;
}<button id="button0" class="CSS">button 1</button>
<button id="button1" class="CSS">button 2</button>
<button id="button2" class="CSS">button 3</button>
<div id="pt0">PT1</div>
<div id="pt1">PT2</div>
<div id="pt2">PT3</div>在顶级范围定义的所有函数和变量都将成为window对象的属性。所以window['clickHandler1']等于clickHandler1。您的代码可以：
var clickhandler = window[clickHandlerID];
当clickHandlerID被设定为字符串等"clickHandler1"，"clickHandler2"等。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句