javascript变量调用对象函数[重复]

Question

我是 OOP 的新手，所以如果我的术语不对，请见谅。我正在尝试使用函数参数来调用对象参数。

我认为使用示例代码会更容易理解：

JS

$(".color").click(function()
{
    var newColor = $(this).attr("data-color");
    functions.colors.show(newColor);
});

var functions =
{
    colors:
    {
        show: function(newColor)
        {
            $("h1").text(myTexts.test.newColor);
        }
    }
} // end functions

var myTexts =
{
    test:
    {
        red: "Bright red",
        green: "Grassy green",
        blue: "Sky blue"
    }
} // end texts

如您所见，我试图让“天蓝色”出现在我的 h1 中。但是，当我点击显示“亮红色”时，这不起作用。

作为参考，这是我的 HTML：

HTML

<span class="color" data-color="red">Red</span>
<span class="color" data-color="green">Green</span>
<span class="color" data-color="blue">Blue</span>

据我了解，当我单击颜色时，我的颜色（数据颜色属性）被解析为“show()”函数，但我无法显示正确的文本。

为什么会这样？

Answer 1

尝试在这种情况下使用bracket notation，

$("h1").text(myTexts.test[newColor]);

完整代码，

var functions =
{
    colors:
    {
        show: function(newColor)
        {
            $("h1").text(myTexts.test[newColor]);
        }
    }
} 

---

你应该在获取数据属性时使用.data(key)..

var newColor = $(this).data("color");