1

我在这些标记中有两个音频标签。我的问题是第二个无法播放

<div class="container">
    <div class="post-container">
        <legend>
            <strong>Zedd - Spectrum</legend>
        </h4>
        <div class="art-item">
            <img src="uploads/arts/default.jpg">
        </div>
        <audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
        <div class="playerContainer">
            <ul id="playerControls">
                <li class="play-bt"></li>
                <li class="pause-bt"></li>
                <li>
                    <div class="progressContainer">
                        <!-- Progess bars container //-->
                        <div class="progressbar"></div>
                    </div>
                </li>
            </ul>
            <span class="timecode">0:00</span>
        </div>
    </div>
    <div class="post-container">
        <legend>
            <strong>Zedd - Spectrum</legend>
        </h4>
        <div class="art-item">
            <img src="uploads/arts/default.jpg">
        </div>
        <audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
        <div class="playerContainer">
            <ul id="playerControls">
                <li class="play-bt"></li>
                <li class="pause-bt"></li>
                <li>
                    <div class="progressContainer">
                        <!-- Progess bars container //-->
                        <div class="progressbar"></div>
                    </div>
                </li>
            </ul>
            <span class="timecode">0:00</span>
        </div>
    </div>
</div>

这是播放曲目的脚本

$(".play-bt").click(function(){
                    var $artItem = $(this).parent(".art-item");
                    console.log($artItem);
                    $artItem.find('audio').play();
                    $artItem.find(".message").text("Music started");
                });

我的问题是我只能播放第一个音频标签。如果还有更多，我该怎么做才能播放第二个标签或第三个音频标签？计数器是选择要播放的音频标签的计数器。但截至目前，我不知道如果此标记中有更多音频帖子，我将如何制作第二个音频标签或用户选择的音频标签。

4

2 回答 2

1

不是 100% 确定这是唯一的问题，但您经常使用 id。id 在页面上应该是唯一的。用类替换它们

而且你的参考是错误的。

$("#play-bt").click(function(){
    // -> will allways try to play song indicated by counter (0)
    $(".audio-player")[counter].play(); 
    $("#message").text("Music started");
})

我不认为你想要那个？您不想在“后容器”中播放音频吗？

你可以这样做：

$(document).ready(function(){
    $(".play-bt").click(function(){
        var $post= $(this).parents(".post-container");
        $post.find('audio')[0].play();
        $post.find(".message").text("Music started");
    });
});

​</p>

=> 并将 play-bt 和消息 ID 更改为类

于 2012-08-08T12:02:45.110 回答
0

事情对您不起作用的原因是您的标记......在您的代码中，您尝试获取单击的“play-bt”类的“父级”，但“art-item”在您的 DOM中不是父级结构体。可能让你认为是，是你不正确的标记缩进......

于 2012-08-08T12:56:12.670 回答