Question

点击处理程序正在访问元素上的数据属性并根据内容设置变量，在本例中为＆＃39; option1＆＃39;。我想使用此变量的名称来访问JSON对象。但是在这个示例中它返回了“未定义”，好像它正在寻找一个名为“此选项”的数组。如何使用此数据属性来恢复正确的JSON内容？

// Note: thisOption returns "option1", which is correct.

jq = jQuery;

// Pass info
jq('.button').click( function() {
    var thisOption = jq(this).data('name');
    jq('#subscriptions .price').text(thisOption.monthly);
});

var option1 = {
    "name"      : "Super Pack",
    "monthly"   : "€10",
    "yearly"    : "€100",
    "gift"      : "Free €20 voucher"
};

Answer 1

如果option1在全局范围内，那么您可以使用动态密钥通过窗口对象访问它：

jq('#subscriptions .price').text(window[thisOption].monthly);

[]表示法允许您使用变量属性或键名。

Answer 2

您可以访问option1，如下所示

jq('#subscriptions .price').text(window[thisOption].monthly);

由于option1位于全局范围内，因此您可以像window.option1一样访问它。当option1是某个变量的值时，您应该访问window[thisOption]

Answer 3

我制作了一些结构，所以我们可以清楚地看到它，你也可以在jsfiddle.net中查看它

继承人：http://jsfiddle.net/8hTrr/3/

HTML

<a href="#" data-option="monthly" class="button">test</a>
<div id="subscriptions">
    <p class="price"></p>
</div>

JS

var option1 = {
    "name"      : "Super Pack",
    "monthly"   : "€10",
    "yearly"    : "€100",
    "gift"      : "Free €20 voucher"
};

jq = jQuery;

// Pass info
jq('.button').click( function() {
    var thisOption = jq(this).data('option');
    jq('#subscriptions .price').text(option1[thisOption]);    
});

从变量访问JSON值

3 个答案: