用PHP分別定義多個glob

Question

我正在嘗試創建一個同時支持.ogg和.mp3的音板，以支持多種瀏覽器音頻支持。 一個div只需要顯示.ogg文件，另一個div應該只顯示.mp3文件。 但是最終顯示了兩個div的兩種文件類型。

<?php
    $files1 = glob("audio/soundboard/*.ogg");
    $files2 = glob("audio/soundboard/*.mp3");
?>

<script>
$(function() {
    $("audio").removeAttr("controls").each(function(i, audioElement) {
    var audio = $(this);
    audio.closest('div').append($('<button>'+audio.attr("title")+'</button>').find('button').click(function() {
        audio[0].play();
    }));
  });
});
</script>

    <div id="ffchrome">
        <?php foreach($files1 as $file) { ?>
            <?php $title = str_replace(".ogg", "", str_replace("audio/soundboard/", "", $file)); ?>
            <audio src="<?php echo $file; ?>" title="<?php echo $title ?>"></audio>
        <?php } ?>
    </div>

    <div id="ie">
        <?php foreach($files2 as $file) { ?>
            <?php $title = str_replace(".mp3", "", str_replace("audio/soundboard/", "", $file)); ?>
            <audio src="<?php echo $file; ?>" title="<?php echo $title ?>"></audio>
        <?php } ?>
    </div>

Answer 1

將其放在文檔頂部，並刪除div中所有當前的javascript：

$(function() {
    $("audio").removeAttr("controls").each(function(i, audioElement) {
    var audio = $(this);
    audio.parent().append($('<button>'+audio.attr("title")+'</button>').click(function() {
       audio[0].play();
    }));
  });
});

您的錯誤是針對頁面上的每個音頻多次運行jquery的“ each（）”方法。

將.click替換為.bind（也是一個好主意，但是您需要參考文檔。