Я использую несколько аудиоплееров HTML5 на одной странице, и мне нужны средства для их индивидуального управления. Я до сих пор использовал:
<?php $unique = uniqid(); ?>
сгенерировать уникальный номер. Я им удалось успешно применить это к моему игроку:
<button class="bb-play" onClick="play-<?php echo $unique; ?>()">Play</button>
Я могу применить это в некотором jQuery, в функции следующим образом:
function play() { document.getElementById('player-<?php echo $unique; ?>').play(); }
Мой вопрос, где мой уникальный номер сказать 56f295fbe6be3 как я могу получить функцию играть() вместо этого появиться как играть-56f295fbe6be3 () ?
Я ценю любую помощь, которую вы можете оказать.
Попытка написать функцию с уникальным номером в названии — плохой подход. Вы должны написать уникальную функцию, которая может обрабатывать их все.
<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>
С семантической точки зрения мы присваиваем <button>
элемент атрибут, который говорит, что такое идентификатор игрока, и было бы более целесообразно поместить его в атрибут данных. Тогда проще использовать jQuery:
<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>
HTML:
<button class="bb-play" onClick="play(<?php echo $unique; ?>);">Play</button>
Javascript:
function play(id) { document.getElementById('player-'+id).play(); }
Если кнопки и проигрыватель находятся внутри одного и того же родительского элемента, вы можете работать без идентификаторов.
<div class="player">
<media .../>
<button class="bb-play">Play</button>
</div>
и код JS
$('.bb-play').on('click', function() {
$('media', $(this).closest('.player')).get(0).play();
});
Почему бы не передать номер идентификатора в качестве переменной функции?
function play_video(id) {
document.getElementById('video-' + id).play();
}
А в HTML используйте:
onClick="play_video(<?php echo $unique; ?>)" id="video-<?php echo $unique; ?>"
// onClick="play_video(56f295fbe6be3)" id="56f295fbe6be3"
Тогда вы можете просто использовать play_video()
для всех видео.