javascript - jQuery Mobile 可折叠集 - 元素关闭时停止音频播放器

Question

大家好，我希望你们能帮助我解决这个问题......

我从 XML 文件动态插入可折叠集。当可折叠集的一个元素打开时，您可以开始一首轨道。但是，当打开另一个元素并关闭旧元素时，轨道仍然会播放。有什么方法可以暂停或停止播放器播放轨道吗？

我使用此脚本在可折叠集中插入 XML 数据。

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "arheologija.xml",
            dataType: "xml",
            success: function (xml) {

                var container = document.getElementById("catalogue");
                container.setAttribute('data-role', 'collapsible-set');

                $(xml).find('artifakt').each(function () {
                    var release = document.createElement("div");
                    release.setAttribute('data-role', 'collapsible');
                    var cat = $(this).find('slika').text();
                    var title = $(this).find('ime').text();
                    var artist = $(this).find('posnetek').text();
                    var tracks = "";
                    var player = "<audio preload=&quotnone&quot><source src=&quotmiles.mp3&quot></audio>"

                    $(this).find('ime').each(function () {
                        tracks = tracks + $(this).find('ime').text() + "<br>";
                    });
                    release.innerHTML = "<h3>" + title + "<br>" + cat + "</h3><p>" + cat + "</p><audio controls><source src='" + artist + "'></audio>";
                    container.appendChild(release);

                });
                $('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false"></div>');
                var catDiv = $('#catalogue');
                catDiv.find('div[data-role=collapsible]').collapsible({
                    theme: 'c',
                    refresh: false
                });
            }
        });
    });
</script>

Answer 1

您可以简单地监听 expand (jQM 1.3)/collapsibleexpand (jQM 1.4) 事件。

$(document).on("collapsibleexpand", function (e) {
  $("audio").each(function () {
    $(this)[0].pause();
  });
});

Demo