盘旋多实例DIV时独特的声音(unique sound when hovering multiple

我试图为我一个div元素悬停与某一类（.trigger）发挥独特的声音。 我的问题是，我有这个div类，这意味着无论哪个我悬停的div的，（相同）声音播放的多个实例。

我dreamscenario会，即只要下一个DIV悬停（希望下次播放声音），以前的任何声音停止（我使用的是1-2秒长的声音文件）。

我已经包括通过DIV我试图为触发使用HTML5之内我的音频。

<div class="trigger">
    <audio id="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.mp3"></source>
    </audio>
</div>

<div class="trigger">
    <audio id="sound" preload="auto">
         <source src="sound2.mp3"></source>
         <source src="sound2.mp3"></source>
    </audio>
</div>

和我使用这个脚本：

$(".trigger")
  $(this).each(function(i) {
    if (i != 0) { 
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent()); 
    }
    $(this).data("cnt", i);
  })
  $(this).mouseenter(function() {
    $("#sound" + $(this).data("cnt"))[0].play();
  });
$("#sound").attr("id", "sound0");

我会亲切任何帮助和更好的主意来实现这一点:)我是一个可怕的新手 - 对不起了点。

Answer 1:

就那么简单？

$('.trigger').hover(
    function() {
        sound = $(this).children()[0];
        sound.play();
    }, function() {
        sound.pause();
        sound.currentTime = 0;
    }
);

现场演示： http://jsfiddle.net/oscarj24/VwSLj/5/

Answer 2:

OK，你的第一个问题是，你有相同的ID（“声音”），每格内，和IDS必须是唯一的。 我想改变成一个类（ class="sound" ）然后，像

$('.trigger').mouseenter(function() {
    $(".sound").get(0).pause();
    $(this).find(".sound").get(0).play();
});

我没有，虽然测试此代码。

Answer 3:

从ID，以班为ID选择第一个变化是不应该被复制。

<div class="trigger">
    <audio class="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.mp3"></source>
    </audio>
</div>

jQuery的

$(".trigger").mouseenter(function () {
     var curAudio = $(this).find('audio');
     var allAudio = $('.sound');
    $.each(allAudio,function(ind,val){  
         $(this).get(0).pause();
         $(this).get(0).currentTime = 0;   
    });
     curAudio.get(0).play();
});

演示在这里

文章来源: unique sound when hovering multiple instance div