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

andの.hover()代わりに関数を使用していることに注意してください。この関数は、パラメーターとして 2 つの関数を受け取ります。最初の関数は、マウスが要素に入ったときにトリガーされ、2 番目の関数は、マウスが要素から離れたときに実行されます。この構文は少し扱いやすく、より理にかなっていると思います。.mouseenter().mouseleave()

于 2013-04-27T23:36:28.757 に答える