来自数组的 JavaScript 函数

Question

快速提问。

我有一个包含 3 个函数的数组。当我调用我想要执行的特定函数时，它不响应数组中的特定索引。它只是执行所有功能，直到它到达最后一个功能。

代码如下:

<p id="sometext">Change Color</p>
<script>
    function paintRed() {
        var text = document.getElementById('sometext');
        text.style.color = "red";
    }

    function paintBlue() {
        var text = document.getElementById('sometext');
        text.style.color = "blue";

    }
    function paintYellow() {
        var text = document.getElementById('sometext');
        text.style.color = "yellow";

    }

    var arrcolor = [ paintRed(), paintBlue(), paintYellow()];

    arrcolor[0]; //This returns the yellow color and not red//

</script>

所以我的

Change Color

总是返回黄色(数组中的最后一个函数)，无论我调用哪个索引，即 (arrcolor[0],arrcolor[1])。< p>

希望这是有道理的。谢谢。

Answer 1

只能把函数名(其实就是reference)放在数组里，这样执行

var arrcolor = [ paintRed, paintBlue, paintYellow];

arrcolor[2](); 

JSFIDDLE

另一种方法是创建一个对象并将每个函数放入其中

var changeColor = {
  paintRed :function(text){
     text.style.color = "red";
   },

   paintBlue :function(text){
     text.style.color = "blue";
   },
   paintYellow:function(text){
       text.style.color = "yellow";
    }

}
var text = document.getElementById('sometext');
changeColor.paintRed(text)

JSFIDDLE