访问 jQuery 中的重复标签

Question

所以我得到了这个 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 当然会在接下来的每个 player-body 中递增。我如何使用 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 多次。

Answer 1

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

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

Answer 2

closest() 的另一种替代方法，但前提是 id 在同一音频播放器中保持一致，可以获取 id 并将其用于定位相关的音频播放器：

示例：

$('.mute').on('click', function()
{
    let id = $(this).attr("id").split("_")[1];
    let audPlayer = $('#player_' + id);
});

Answer 3

从 .mute 图标...查找 parent matching the .player-body... Then lookdown, using .find()，使用 .player class...

你现在有了目标元素！

然后简单地 mute it... 好的...您需要 DOM 元素，而不是 jQuery 对象。但是你对 jQuery 对象使用 [0] 因为 DOM 元素是第一个属性.

具体来说，它是一条线：

$('.mute').on('click', function(){
    $(this).parents(".player-body").find(".player")[0].muted = true;
});

也就是所谓的"traversing"DOM元素...
您只需要知道 a couple jQuery 导航方法即可。 ;)

访问 jQuery 中的重复标签

Access to repetitive tags in jQuery

html

javascript

jquery

mp3

html5-audio