使用 jQuery 和 HTML5 数据动态调用 JSON 数据-*答案

【问题标题】：Dynamically calling JSON data using jQuery & HTML5 data-*使用 jQuery 和 HTML5 数据动态调用 JSON 数据-*
【发布时间】：2016-10-30 16:30:41
【问题描述】：

我正在使用 ExpressionEngine 并将我的频道条目转换为 JSON，效果很好。

我要做的是使用存储在data-* 属性中的 ID 使用来自特定 JSON 对象的信息填充 Sweet Alert 2 覆盖。

以下是 JSON 的示例：

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}

如果我像这样做一个简单的 jQuery 警报，它会返回我的名字：

alert(director_45.title)

但是，如果我在 jQuery 中做这样的事情：

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(director.title);
});

用这个 HTML 来触发它：

<div class="col-xs-6 col-md-3">
  <div class="director-box">
    <img src="/images/made/images/uploads/images/Andy_400_300_c1.jpg" class="img-responsive" width="400" height="300" alt="" />
    <h3>Andy H</h3>
    <p>Director</p>
    <a class="trigger-director" data-director="45">Find out more</a>
  </div>
</div>

点击“了解更多”链接时的警报仅显示“未定义”。

我也在这里创建了一个 jsFiddle 链接 - https://jsfiddle.net/zu103vxc/

知道我做错了什么和/或错过了什么吗？

【问题讨论】：

var director = window[ 'director_' + director_id]; 全局变量是窗口对象的属性，您可以使用数组表示法访问它们
director 不是一个对象，director 是一个字符串 'director_45'，哦，@JuanMendes，那个会派上用场的
JavaScript Dynamic Variable Names的可能重复
@JuanMendes 有趣的是控制台显示“未捕获的类型错误：无法读取未定义的属性 'title'”
@andy 做一些更仔细的调试，如果有一个名为director_45 的全局变量，它将起作用

标签： jquery json html

【解决方案1】：

使用 eval()

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}

alert(director_45.title)

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(eval(director).title);
});

或全局变量

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}
window.director_45 = director_45;
alert(director_45.title)

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(window[director].title);
});

【讨论】：

非常感谢，决定走全局var路线。让我头疼不已:)