1

我的网站上有不同 div 中的声音图标图像列表。我正在尝试使用 jQuery 来播放/暂停不同的歌曲mouseenter，mouseleave具体取决于悬停在哪个图标上。我有第一个项目工作，但在理解让其余项目工作的最佳方法时遇到问题。对此的任何帮助将不胜感激。谢谢。

<audio preload="auto" id="songOne">
  <source src="audio/****.mp3" controls></source>
  <source src="audio/****.ogg" controls></source>
  <source src="audio/****.wav" controls></source>
  Your browser isn't invited for super fun audio time.
</audio>

$(document).ready(function(){
  var song1 = $("#songOne")[0];
  $(".topDownloads img").first().mouseenter(function() {
    song1.play();
    $(".topDownloads img").mouseleave(function() {
      song1.pause();
    });
  });
});
4

1 回答 1

2

您可以做的是将特定的歌曲对象名称嵌入到用户单击的元素中。例如，假设.topDownloads元素是一个 div：

<div class="topDownloads">
  <img data-song="someSong" src="..." />
  <img data-song="anotherSong" src="..." />
</div>

您现在可以在鼠标事件回调中使用该数据属性。将所有歌曲对象存储在 key->value 对象中，并从 data 属性中检索它们。

// setting up key->value song pairs
var songs = {
  'someSong':$("#someSong")[0],
  'anotherSong':$("#anotherSong")[0],
};

$(".topDownloads img").hover(function() {
   // extract song key name
   var songItem = songs[$(this).data('song')];
   songItem.play();
},function() {
   // extract song key name
   var songItem = songs[$(this).data('song')];
   songItem.pause();
});

请注意，我使用的是.hover()函数而不是.mouseenter()and .mouseleave()。该函数接收两个函数作为参数，第一个函数在鼠标进入元素时触发，第二个函数在鼠标离开元素时执行。我认为这种语法更容易使用并且更有意义。

于 2013-04-27T23:36:28.757 回答