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");

javascript变量调用对象函数

JS

HTML

1 个答案: