j查询音频导航

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 元素。所以 $("#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]存储在生产中的变量中