类的所有成员的Onclick函数
我正在制作一个两栏的数学页面，左边是定理和定义，右边是更多的解释。
用户访问解释的方式是单击类“可解释”的文本。
页面加载后，我运行一个脚本，为每个“可解释”元素提供自己的onclick函数，该函数隐藏右侧面板上的文本(如果有的话)，并使用单击的元素解释来填充它。
但是当我尝试运行它时，它告诉我可解释的元素是未定义的。
下面是这个类的相关函数和文本示例：
函数
<script type="text/javascript">
window.setTimeout(makeExplanations, 3000);
function makeExplanations(){
var explainables = document.getElementsByClassName("explainable");
var currentlyShowing = "";
for(var i = 0; i < explainables.length; i++){
console.log("id: " + explainables[i].id);
var element = explainables[i];
explainables[i].onclick = function(){
if(currentlyShowing != ""){
document.getElementById(currentlyShowing + 'e').style.display = "none";
}
var explanationDiv = document.getElementById(explainables[i].id + 'e')
explanationDiv.style.display = "inline";
explanationDiv.focus();
currentlyShowing = explainables[i].id;
};
}
}
</script>我需要等待3秒才能执行，因为只执行body onload=makeExplainables()是不够的。(可能与MathJax加载的方式有关--我不确定。)
可解释类示例
<span class="explainable" id="595858535"><a href="#top">so either statement is vacuously true</a></span>. Thus, $X = Y$ holds,
and hence we declare that there exists only one set with no elements.</p>及其揭示的解释
<div id="595858535e" style="display: none;">
<p>An if-then statement (a conditional) is vacuously true when the if portion is false in all cases.
For example, the statement "If 2 + 2 = 5, then pigs fly" is vacuously true, since its
antecedent (if 2 + 2 = 5) is always false.</p>
<p>In this case, the conditional in question is "there exists some $x \in X$ such that $x \notin Y$".
But since $X$ is an empty set, there does not exist any $x \in X$ such that anything. Hence, the
statement is vacuously true in all cases.</p>
<p>Another way to think about it is this: a conditional is only falsified if its antecedent ("if ...") is true
and its consequent ("then ... ") is false. If the antecedent is always false, then this can never happen.
Thus the statement as a whole is always true.</p>
</div>当我试图单击可解释的文本时，Firebug中出现了错误
16:23:44.704 "id: 595858535" zfc:89
16:23:44.704 "id: 595858536" zfc:89
16:23:53.045 TypeError: explainables[i] is undefined zfc:95回答 2
Stack Overflow用户
发布于 2014-02-09 23:27:29
造成此错误的真正原因是，当调用click处理程序时，"i“已经达到了等于数组长度的值。因此，解释，即explainablesexplainables.length是未知的。
JS篡改控制台日志以更好地解释您：http://jsfiddle.net/wV4Lh/6/
element.onclick = function(){
// length of array is 2 for this example
console.log("explainables length: " + explainables.length);
// value of i is 2 in the click handler
console.log("i: " + i);
// explainables[i] = explainables[2] is undefined
console.log("explainables[i] - ith: " + explainables[i]);
// explainables[0] is valid
console.log("explainables[0] - 0th: " + explainables[0]);
// explainables[1] is valid
console.log("explainables[1] - 1st: " + explainables[1]);
};这清楚地表明，说明性在单击处理程序的范围内很好，但是值i=数组的长度，因为'for‘循环在触发click事件之前已经完成了它的完全执行方式。
P.S:最初理解处理程序这种行为的困难是因为处理程序的工作方式有违直觉，也就是说，它不会与围绕它的其他代码顺序执行。在这种情况下，处理程序只有在触发相应事件时才执行，而不是在for循环中按顺序执行。
Stack Overflow用户
发布于 2014-02-09 21:41:20
因此，我最终通过将onclick函数中的explanation[i]更改为this来工作。
我以为我正在创建一个闭包，其中explanation[i]变量可以在onclick函数中访问，即使在makeExplanations()结束之后也是如此，但我想这是不正确的。
修正后的onclick函数如下所示：
explainables[i].onclick = function(){
if(currentlyShowing != ""){
document.getElementById(currentlyShowing + 'e').style.display = "none";
}
var explanationDiv = document.getElementById(this.id + 'e')
explanationDiv.style.display = "inline";
explanationDiv.focus();
currentlyShowing = this.id;
};https://stackoverflow.com/questions/21665292
复制相似问题
腾讯云开发者
