使用 jQuery & HTML5 数据动态调用 JSON 数据-*

Question

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

我想做的是使用存储在 data-* 属性中的 ID，使用来自特定 JSON 对象的信息填充 Sweet Alert 2 叠加层。

这里是 JSON 的例子：

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

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

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>

单击 'Find out more' link 时的警报仅显示 "Undefined"。

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

知道我做错了什么吗 and/or 不见了？

Answer 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);
});

使用 jQuery & HTML5 数据动态调用 JSON 数据-*

Dynamically calling JSON data using jQuery & HTML5 data-*

html

jquery

json