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

【问题标题】：Adding content into existing ordered list with PHP and/or jQuery?使用 PHP 和/或 jQuery 将内容添加到现有的有序列表中？
【发布时间】：2016-04-14 19:17:20
【问题描述】：

与销售 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 
}

提前感谢您的帮助！

【问题讨论】：

我想每个产品都是一个音轨。所以人们可以听这个音频产品的某种简短的音频预览（音频样本）（或不听？）。所以你已经有每个音频产品的轨道号（或者没有？）。那么您到底想要$tracknumber：与产品跟踪具有相同的价值（在不同的$directory 中）或其他东西？请你能澄清你的问题，更新它吗？你说你已经在有序列表中有内容，你能告诉我们更多细节吗？您如何上传您的内容以及在哪里上传？
感谢您的提问。每个产品都是一个完整的专辑，然后在该专辑页面上是曲目列表，该曲目列表已在 WordPress 内容编辑器中以有序列表的形式输入，以便获得正确的曲目列表。现在每个专辑都有这些曲目的音频预览/样本，我正在尝试找出一种方法，能够将这些样本添加到曲目列表中，而无需手动逐个曲目。跨度>
在你的循环之外，你定义$track = 0;。在你的循环里面；你以这种方式增加变量 $track 的值$track=+ 1;。然后使用类似$track < 10 ? '0'.$track : ''.$track; 的if else（获取01、02、03…到99，而不是获取1、2、3…到99）。让我知道它是否有效。我不能做更多，因为我需要你的详细代码。试试看，让我们知道……
感谢您对曲目编号的帮助！
我想一旦我弄清楚如何为每个现有的 li 元素创建循环。还没有。非常感谢您的帮助。

标签： php jquery wordpress woocommerce

【解决方案1】：

我能够通过 php.ini 使用 jquery 的 each() 和 index 函数来解决这个问题。我在 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>

希望以后能对其他人有所帮助。

【讨论】：