Question

我想加载一个不同的音频文件，点击网页中的不同文本。我使用以下jQuery函数：

final Map<Character, Integer> value = cache.get(inputData);
if (value != null) {
    return value;
}

var audio = document.createElement('audio');      
$(".text_sample").on("click", function() {
  audio.src = eval(this.id);
  audio.play();
});

您认为在此上下文中使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="text_sample" id="a_music">music</a><br /> <a class="text_sample" id="a_weather">weather</a>是否正确？有更好的方法吗？

Answer 1

如果它是全局变量，请使用以下内容。

audio.src = window[this.id];

Answer 2

因此，您似乎有一些与元素的ID相对应的变量，并且您希望使用元素ID来获取变量的值。

虽然eval有效但我不会这样做。没有太多的安全问题，因为任何eval'd代码只会影响用户自己的机器，但更简洁的方法是使用data-属性。

  <a class="text_sample" id="a_music" data-src="/foo.wav">music</a><br />
  <a class="text_sample" id="a_weather" data-src="/bar.wav">weather</a>

然后根本不需要依赖局部变量。而是使用元素上的dataset对象来获取src。

  var audio = document.createElement('audio');      
  $(".text_sample").on("click", function() {
      audio.src = this.dataset.src;
      audio.play();
  });

这也可以避免像eval那样杀死优化。

在JavaScript中正确使用eval

2 个答案: