Name der benutzerdefinierten Funktion mit eindeutiger Nummer

Question

Ich verwende eine Reihe von HTML5-Audio-Playern auf einer Seite und brauche ein Mittel, um sie einzeln zu steuern. Ich habe bisher verwendet:

<?php $unique = uniqid(); ?> 

, um eine eindeutige Nummer zu generieren. Ich habe sie in der Lage gewesen, um erfolgreich diese auf meine Spieler anwenden:

<button class="bb-play" onClick="play-<?php echo $unique; ?>()">Play</button> 

ich in der Lage bin dies innerhalb der Funktion innerhalb einer jQuery, anwenden wie folgt:

function play() { document.getElementById('player-<?php echo $unique; ?>').play(); } 

Meine Frage ist, wo meine einzigartige Anzahl ist sagen, 56f295fbe6be3 wie bekomme ich die Funktion play() anstatt als play-56f295fbe6be3()?

Ich schätze jede Hilfe, die Sie zur Verfügung stellen können.

Answer 1

HTML:

<button class="bb-play" onClick="play(<?php echo $unique; ?>);">Play</button> 

Javascript:

function play(id) { document.getElementById('player-'+id).play(); } 

Answer 2

Der Versuch, eine Funktion mit einer eindeutigen Nummer in seinem Namen zu schreiben, ist ein schlechter Ansatz. Sie sollten lieber eine einzigartige Funktion schreiben, die alle behandeln kann.

<script> 
    function play(that) { 
     var playerId = that.id; 
     document.getElementById('player-' + playerId).play(); 
    } 
</script> 
<button class="bb-play" id="<?php echo $unique; ?>" onClick="play(this)">Play</button> 

Aus einer semantischen Sicht sind wir ein Attribut zum <button> Elemente zugeordnet wird, sagt, was die Spieler-ID ist und es würde mehr Sinn, um es in ein Datenattribut zu machen. Es kommt einfacher jQuery verwenden dann:

<button class="bb-play" data-player-id="player-<?php echo $unique; ?>">Play</button> 

<script> 
    $("button.bb-play").click(function(){ 
     var playerId = $(this).data('playerId'); 
     $("#" + playerId).play(); 
    }); 
</script> 

Answer 3

Wenn die Tasten und der Spieler Orte innerhalb des gleichen Elternelement sind, könnten Sie ohne ids arbeiten.

<div class="player"> 
    <media .../> 
    <button class="bb-play">Play</button> 
</div> 

und die js Code

$('.bb-play').on('click', function() { 
    $('media', $(this).closest('.player')).get(0).play(); 
}); 

Answer 4

Warum passieren nicht die ID-Nummer als eine Variable an die Funktion?

function play_video(id) { 
    document.getElementById('video-' + id).play(); 
} 

Und in der HTML-Anwendung:

onClick="play_video(<?php echo $unique; ?>)" id="video-<?php echo $unique; ?>" 

// onClick="play_video(56f295fbe6be3)" id="56f295fbe6be3" 

Dann können Sie einfach play_video() für alle Videos verwenden.