Javascript在循环中将参数传递给onclick函数答案

【问题标题】：Javascript pass parameters to onclick function in loopJavascript在循环中将参数传递给onclick函数
【发布时间】：2012-04-26 20:25:27
【问题描述】：

有什么想法可以让这个脚本工作吗？

我有两段：

<p data-color="red">This textarea has a character limit of 50.</p>
<p data-color="blue">This one has a character limit of 40.</p>

还有一些 JS：

<script>
var p = document.getElementsByTagName('p'),
    i = p.length;

while (i--) {
    color = p[i].getAttribute('data-color');
    p[i].onclick = function() {
        this.style.color = color;
    };
}
</script>

Demo

我希望段落在单击时变成指定的颜色。我需要将每个元素的颜色传递给 onclick 函数。

有什么想法吗？

提前非常感谢！

【问题讨论】：

你支持/反对 jQuery 吗？这样做会很容易
@JoshDavenport 对于这个小sn-p，我宁愿不用jQuery。
@JoshDavenport：不用 jQuery 也很简单。

标签： javascript html loops closures

【解决方案1】：

<script>
var p = document.getElementsByTagName('p'),
    i = p.length;

while (i--) {
    p[i].onclick = function() {
        this.style.color = this.getAttribute('data-color');
    };
}
</script>

【讨论】：

我说我要把颜色传给函数。
我不想每次点击都计算'data-color'属性的值。
@Web_Designer。他向你展示了一种没有它的方法。您应该提到它必须带有参数！
你说，你需要，但你不需要，这是正确的解决方案。
@gdoron 我说它必须传递到函数中，很抱歉沟通不畅。有什么想法吗？

【解决方案2】：

好的，被否决让我很困扰，所以我又试了一次。纯JS。这就是我想出的。正如所指出的那样，实际上没有办法将颜色作为变量传递给函数。因此，将一个类附加到段落标签并使用该类作为颜色似乎是避免 jQuery 并提供非常简单的解决方案的唯一方法。由于示例代码中的所有段落都没有以类开头，这似乎是一个可行的解决方案。 Here's my jsFiddle.

【讨论】：

对于我的具体问题，我需要将它传递给函数。最简单的方法是什么？
我猜你提供的这段代码只是对你的问题的简化。我相信我的编辑包含针对您的问题的更具体的解决方案。
你的第二个例子不起作用。 JavaScript 没有块作用域，分配给处理程序的theColor 参数无论如何都会影响外部theColor。您将在处理程序中实际获得的是事件对象。
我已经试过了，这是你的演示：jsfiddle.net/Daniel_Hug/4DGGz/1
对于这么小的脚本，我宁愿不使用 jQuery。