1
votes

Accès aux balises répétitives dans jQuery

J'ai donc ce morceau de HTML (c'est un lecteur mp3): le code

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?
});

est généré automatiquement, donc je pourrais avoir plus de 30 lecteurs comme celui-ci sur le même site Web. Les identifiants dans les balises seront bien sûr incrémentés dans chaque corps de joueur suivant. Comment gérer tous ces joueurs avec des méthodes génériques dans jQuery? Pour gérer le bouton de sourdine du lecteur, je pourrais avoir quelque chose comme ceci:

<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>

Mais comment dans la fonction ci-dessus je pourrais accéder à la balise du lecteur audio sans utiliser son identifiant? Comme je l'ai dit, je veux que les méthodes soient génériques, je ne peux pas les répéter plus de 30 fois.

javascript jquery html html5-audio mp3

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser la méthode plus proche pour cibler le conteneur qui englobe les commandes et le lecteur.

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

0 commentaires

1
votes

Une autre alternative à plus proche () , mais seulement si id sont cohérents dans le même lecteur audio, pourrait être d'obtenir cet id et d'utiliser pour cibler le lecteur audio associé:

Exemple:

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

0 commentaires

1
votes

À partir de l'icône .mute ... Recherchez la correspondance des parents a> le .player-body ... Puis recherche, en utilisant . find () , pour la balise en utilisant la classe .player ...

Vous avez maintenant l'élément cible!

Ensuite, il suffit de couper le son a > ... OK ... Vous avez besoin de l'élément DOM, pas de l'objet jQuery. Mais vous l'avez en utilisant [0] contre un objet jQuery car l'élément DOM est la première propriété.

Concrètement, c'est une ligne unique:

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

C'est ce qu'on appelle des éléments DOM "traversants" ...
Il vous suffit de connaître quelques méthodes jQuery pour naviguer. ;)

0 commentaires