Question

我正在我的一个数据库中使用一个字段来存储歌曲位置...当我在数据库中有一首歌时，它在onClick上播放效果很好。但是，如果数据库中包含2首或更多歌曲，则onClick会同步播放。如何循环jQuery append语句以像PHP while循环一样？对不起，我还在学习jQuery / Javascript ...我实际上遇到了这个问题。所以一个解决方案真的可以帮到我！

<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
mysql_connect("localhost", "root", "")or die("Could not connect: " . mysql_error());
mysql_select_db("kevin") or die(mysql_error());

$song_query = mysql_query("SELECT idsongs, songuri, songname FROM songs");

    while($row = mysql_fetch_array($song_query)) {
    echo "<span class='song'><b>Song Name: </b>";
    echo $row['songname'];
    echo "<br>";
    //echo '<img alt="" id="play" src="play.png" />';
    //echo '<div id="audio"></div>';
?>
<script type="text/javascript">
$(document).ready(function() {
 $('#play').click(function() {
        $("#audio").append('<audio autoplay="true" src="<?php echo $row['songuri'] ?>" /></audio>');
});
});
</script>
<img alt="" id="play" src="play.png" />
<div id="audio"></div>
<?php } ?>

Answer 1

这为您的所有歌曲提供了自己的停止/播放控件。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
mysql_connect("localhost", "root", "")or die("Could not connect: " . mysql_error());
mysql_select_db("kevin") or die(mysql_error());

$song_query = mysql_query("SELECT idsongs, songuri, songname FROM songs");

while($row = mysql_fetch_array($song_query)) {
    echo "<div class='song' sid='".$row['idsongs']."' songuri='".$row['songuri']."'>";
        echo "<b>Song Name: </b>";
        echo $row['songname'];
        echo "<br>";
        echo "<img class='play' src='play.png' /><br>";
        echo "<div class='audio'></div>";
        echo "<div class='stop'>Stop!</div>";
    echo "</div>";
} 
?>


<script type="text/javascript">
$(document).ready(function() {
    $('.play').click(function() {

        var songdiv = $(this).parent('div.song');

        var songuri = songdiv.attr('songuri');      
        var sid = songdiv.attr('sid');
        // stop this song if it's already playing

        stopPlayer(sid);

        // play
        var audio = '<audio class="player" sid="'+sid+'" autoplay="true" src="'+songuri+'" /></audio>';
        $(this).siblings('div.audio').html(audio);
    });
    $('.stop').click(function(){
        var songuri = $(this).parent('div.song').attr('sid');
        stopPlayer(songuri);
    });
});

function stopPlayer(id) {
    var p = $('.player[sid='+id+']');
    if (p[0]) {
        p[0].pause();
    }


}

</script>

Answer 2

在我看来，您没有提供将autoplay=true附加到点击的特定 play按钮的机制 - 您将其附加到所有按钮#audio的元素。尝试为每个play和div生成带有音频的唯一ID，以便将两者链接在一起。

作为第一次尝试，试试这个：

while($row = mysql_fetch_array($song_query)) {
echo "<span class='song'><b>Song Name: </b>";
echo $row['songname'];
echo "<br>";
echo '<img alt="" id="' + "play-$row[idsongs]" + '" src="play.png" />';
echo '<div id="' + "audio-$row[idsongs]" +'"></div>';

这为您提供了所有对象的唯一标识符;我不太清楚JS是否足以建议在点击audio-$row[idsongs]时如何关联play-$row[idsongs]，但肯定必须有某种方法来发现被点击对象的id，将play更改为audio，然后附加HTML。

循环访问jQuery语句

2 个答案: