Question

使用销售CD的店面（WooCommerce / WordPress），每个相册/产品页面都有一个已存在于标准WordPress编辑器字段中的有序列表中的轨道列表。现在我需要能够为轨道列表中的每个轨道添加音频样本。但是，我不是手动添加每个音频轨道/播放器，而是寻求帮助在产品模板中创建一个功能，该功能将在每个“li”元素之前（或之内）添加音频样本轨道。以下是为了让玩家以正确的方式进入列表项目，但问题是如何在列表中增加跟踪编号。

function samples_audio(){
    $cloudbase = 'http://domain.com';
    $directory = get_post_meta(get_the_ID(), 'directory', true);
    $trackprep = 'track';
    $num = 0;
    $sep = '/';
    $source = $cloudbase.$sep.$catno.$sep.$trackprep.$num;
        ?>
        <script type="text/javascript">
            var AudioPlayer = "<?php echo $source; ?>";
            var TrackNo = 0 + 1;
            jQuery('.tracks li').before('<audio controls><source src="'+ AudioPlayer +''+ TrackNo +'.mp3" type="audio/mpeg"></audio>');
        </script>
        <?php 
}

提前感谢您的帮助！

Answer 1

我能够使用jquery的每个（）和索引函数来解决这个问题。我将以下内容添加到WooCommerce中的content-single-product.php模板中：

<?php
$cloudbase = 'http://domain.com';
$directory = get_post_meta(get_the_ID(), 'directory', true);
$trackprep = 'track';
$sep = '/';
$source = $cloudbase.$sep.$catno.$sep.$trackprep.$num;
?>
<script type="text/javascript">
jQuery('.tracks li').each(function(indexInt){
    var AudioPlayer = "<?php echo $source; ?>";
    if (indexInt <= 9) {
        jQuery(this).before('<audio><source src="'+ AudioPlayer +'0'+ (indexInt +1 )+'.mp3" type="audio/mpeg"></audio>');
    }
    if (indexInt >= 10){
        jQuery(this).before('<audio><source src="'+ AudioPlayer +''+ (indexInt +1 )+'.mp3" type="audio/mpeg"></audio>');
    }
});
</script>

希望将来帮助别人。

使用PHP和/或jQuery将内容添加到现有的有序列表中？

1 个答案: