jQuery音频导航

Question

我想创建一个使用jQuery和HTML5的音频导航栏，但它不起作用。

任何人都可以帮忙！

<nav class="wrapper-nav"> 
    <ul class="mianMenu"> 
    <li class="first"><a href="#">Home</a></li> 
    <li><a href="">Grooming</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Contact Us</a></li> 
    <li><a href="#">Location</a></li> 
    <audio id="myaudio" src="dogbark.mp3"></audio> 
    <audio id="myaudio2" src="miaow.mp3"></audio> 
    </ul> 
</nav> 

这是jQuery代码：

$("li").hover(function(){$("#myaudio").play()} 
); 

Answer 1

它不起作用，因为$("#myaudio")返回一个jQuery对象和jQuery对象没有玩儿法。 对于play方法的工作，你必须给它一个原生的dom元素。 so $（“＃myaudio”）[0]将起作用。

这里是一个工作示例：

$(function() { 
 
    $('li').hover(function() { 
 
     if ($("#myaudio")[0].paused == false) { 
 
      $("#myaudio")[0].pause(); 
 
     } else { 
 
      $("#myaudio")[0].play(); 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="wrapper-nav"> 
 
    <ul class="mianMenu"> 
 
     <li class="first"><a href="#">Home</a></li> 
 
     <li><a href="">Grooming</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     <li><a href="#">Location</a></li> 
 
     <audio id="myaudio" src="audio.mp3"></audio> 
 
    </ul> 
 
</nav>

注：这个例子只是为了演示的目的，可以储存您的选择$("#myaudio")[0]在变量生产