时间戳

首页 > 解决方案 > 访问 jQuery 中的重复标签

javascript - 访问 jQuery 中的重复标签

问题描述

所以我得到了这段 HTML（它是 mp3 播放器）：

<div id="player-body_0" class="player-body">
    <audio id="player_0" class="player">
        <source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
    </audio>

    <div id="audio-player_0" class="audio-player">
        <div id="controls_0" class="controls">
            <i id="play_0" class="fa fa-play play"></i>
            <span id="start-time_0" class="time start-time">00:00</span>
            <div id="progressbar_0" class="progressbar"></div>
            <span id="time_0" class="time">00:00</span>
            <i id="mute_0" class="fa fa-volume-up mute" onclick=""></i>
            <div id="volume_0" class="volume"></div>
        </div>
    </div>
</div>

代码是自动生成的，所以我可以在同一个网站上拥有 30 多个这样的玩家。标签中的 ID 当然会在每个下一个玩家主体中增加。我如何使用 jQuery 中的通用方法管理所有这些播放器？要管理播放器静音按钮，我可以有这样的东西：

var mute_button = $('.mute'); 
var player = document.getElementById('player_0');

mute_button.click(function() {
    $(this); //clicked mute button
    //how to easily access proper audio tag without using its id?
});

但是在上面的函数中，我如何在不使用其 ID 的情况下访问音频播放器标签？正如我所说，我希望方法是通用的，我不能只是重复它们 30 多次。

标签： javascriptjqueryhtmlmp3html5-audio

解决方案

您可以使用closest方法来定位包含控件和播放器的容器。

$('.mute').on('click', function() {
    const $player = $(this).closest('.player-body').find('.player');
});

推荐阅读