javascript - Javascript在循环中将参数传递给onclick函数

Question

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

我有两段：

<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>​

演示

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

有任何想法吗？

提前非常感谢！

Answer 1

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

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

Answer 2

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