Question

我要做的是循环浏览我的数据库中的2个网址。到目前为止，我已经让它在第一行工作，但我需要它来遍历两行。截至目前，它只是循环遍历数据库中的第一个URL两次。我试着让'#jquery_jplayer_1'成为一个班级，但这似乎仍然没有用。有什么想法或帮助吗？

<!DOCTYPE html>
<html lang="en">
<head>
<?php include("vh.php"); ?>
<?php $query = $this->db->query("SELECT * FROM music");
      foreach ($query->result() as $row) {
?>
        <!-- Example code to create a simple player using jPlayer 2.1.0 -->

        <!-- Skins are defined in CSS. Uncomment the following CSS reference and comment out the one below it to switch skins -->

        <!--<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />--> 
        <link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
        <script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $(".jquery_jplayer_1").jPlayer({
                    ready: function(event) {
                        $(this).jPlayer("setMedia", {
                            mp3: "<?=$row->songURI?>",
                        });
                    },
                    swfPath: "http://www.jplayer.org/2.1.0/js",
                    supplied: "mp3"
                });
            });
        </script>

    </head>
    <body>
        <div class="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">

                        <!-- comment out any of the following <li>s to remove these buttons -->

                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>

                    <!-- you can comment out any of the following <div>s too -->

                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>                   
                </div>

                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
    </body>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<?php } ?>

Answer 1

所以你在这里遇到一些问题。他们中的大多数都是在js。我也看了jplayer api，它似乎一次只能播放一首歌，这就是为什么你在那里有那个循环我想。

以下是您的问题：

理想情况下，您希望在jquery中有一个文档就绪函数。这使您的代码变得无处不在。如果你可以帮助我，我会做一个功能，在这种情况下你可以。
在你的代码中，选择器$(".jquery_jplayer_1")将返回一个包含2个元素的jquery对象（因为你在循环后页面上有2个div类），但是因为你有2个函数启动jplayer到那些2个元素（首先是mp3＃1然后是mp3＃2）你要么在第二个init上打破jplayer，要么将它们都设置为mp3＃2
你的setMedia对象中有一个尾随逗号：mp3: "<?=$row->songURI?>", - 这将破坏旧的IE，带有非常神秘的js错误。删除尾随逗号。
你在空的jplayer div上有2个类属性！

这样做的正确方法是：

将循环移动到2个jplayer div，container和空玩家div
确保将类输出为jquery_jplayer_1和jquery_jplayer_2，并为容器输出相同的

在ready函数中放置第二个循环，以向jplayer输出单独的init调用。这是第二个循环迭代输出应该是这样的：

       $(".jquery_jplayer_2").jPlayer({
            ready: function(event) {
                $(this).jPlayer("setMedia", {
                    mp3: "<?=$row->songURI?>"
                });
            },
            cssSelectorAncestor: '.jp_container_2',
            swfPath: "http://www.jplayer.org/2.1.0/js",
            supplied: "mp3"
        });

请注意，我添加了 cssSelectorAncestor：'。jp_container_2'，您需要在init函数中使用它来告诉它使用哪个容器。每个玩家应该有一个单独的容器。

我希望这有帮助

另外，你底部还有一些额外的doc类型垃圾。

jQuery没有正确地循环遍历jPlayer中的Ci数据

1 个答案: