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]在變量生產