Question

我在一个页面上使用了许多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 我怎样才能让 play（）显示为 play-56f295fbe6be3（） ？

感谢您提供的任何帮助。

Answer 1

尝试编写名称中带有唯一编号的函数是一种不好的方法。你应该写一个能够处理它们的独特函数。

<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>元素分配一个属性，该属性说明了玩家ID是什么，将它放入数据属性会更有意义。然后使用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>

Answer 2

<强> HTML：

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

<强>使用Javascript：

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

Answer 3

如果按钮和播放器位于同一个父元素内，则可以不使用id。

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

和js代码

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

Answer 4

为什么不将id号作为变量传递给函数？

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()。

自定义函数名称使用唯一编号

4 个答案: