访问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当然会在每个下一个玩家身体中增加。我如何在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

来自.mute图标...查找parent matching .player-body ...然后使用.find()，使用<audio>等级查找.player标签......

你现在有了目标元素！

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

具体地说，它是一个班轮：

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

这就是所谓的“遍历”DOM元素...... 你只需要知道a couple jQuery方法来导航。 ;）

Answer 2

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

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

Answer 3

closest()的另一种替代方案，但只有当id在同一音频播放器中保持一致时，才能获得id并使用它来定位相关的音频播放器：

例：

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