Question

当我将鼠标悬停在页面上的元素上时，我正在使用howler.js来启动音频。为了避免重复每个元素的悬停函数，我想我可以抓住每个元素的id，将结果存储在变量中并使用该变量来播放相应的音轨。变量＆＃34; track＆＃34;在控制台中返回正确的结果但是当我将它附加到.play（）方法时，我得到......

未捕获TypeError：track.play不是函数
      （匿名函数）@ index.html：413
      b.event.dispatch @jquery.min.js：3
      v.handle @jquery.min.js：3

这里是代码（使用jquery 1.9.1和howl.js 1.1.26）

＆＃13;

var One   = new Howl({ urls: [ 'audio/One.mp3' ] });
var Two   = new Howl({ urls: [ 'audio/02.mp3' ] });
var Three = new Howl({ urls: [ 'audio/03.mp3' ] });

$('.track').hover(function() {
  var track = $(this).attr("id");
  track.play();
  console.log(track);
}, function() {
  var track = $(this).attr("id");
  track.pause();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.26/howler.min.js"></script>

<div class="track" id="One">Track 1</div>
<div class="track" id="Two">Track 2</div>
<div class="track" id="Three">Track 3</div>

＆＃13;

Answer 1

您不能使用字符串按名称引用变量。处理此问题的最佳方法是创建一个用于保持轨道的对象。

var tracks = {
    One: new Howl({ urls: [ 'audio/One.mp3' ] }),
    Two: new Howl({ urls: [ 'audio/02.mp3' ] }),
    Three: new Howl({ urls: [ 'audio/03.mp3' ] })
};

$('.track').hover(function() {
    var track = $(this).attr("id");
    tracks[track].play();
    console.log(track);
}, function() {
    var track = $(this).attr("id");
    tracks[track].pause();
});

然而，这仍然不理想。您可以使用数据属性来保存跟踪信息，而不是Id。

，从而进一步改进它

<div class="track" data-track="1">Track 1</div>

然后像这样访问它：

var track = $(this).data("track")

然后这样，您可以将曲目存储在数组中，这是此处使用的最自然的数据类型：

var tracks = [
    new Howl({ urls: [ 'audio/One.mp3' ] }),    
    new Howl({ urls: [ 'audio/Two.mp3' ] })
];

在Howler.js

1 个答案: