循环执行jQuery语句
Looping through a jQuery statement
我在我的一个数据库中使用一个字段来存储歌曲位置…当我在数据库中有一首歌时,它在onClick上播放得很好。但是当数据库中有2首或更多的歌曲时,onClick会同步播放。我如何循环通过jQuery追加语句的行为像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 } ?>
这为您的所有歌曲提供了自己的停止/播放控制。
<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>
在我看来,您没有提供将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,建议如何在点击play-$row[idsongs]
时关联audio-$row[idsongs]
,但肯定有一些方法可以发现点击对象的id
,将play
更改为audio
,然后附加HTML。
相关文章:
- SharePoint 2010 Jquery/JSON Rest Multiple OR语句-如何
- jquery if语句返回return wong语句
- jQuery模板中的If语句
- 将语句与jquery相结合,并使用媒体查询来实现返回页首按钮
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- MVC Jquery-按钮点击-获取if语句错误
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- .has() 函数在 if 语句 (jQuery) 中不起作用
- 如何使用if语句jquery对数字进行动画处理
- SyntaxError:缺少;before语句-jQuery ContentHover
- Switch语句jQuery不适用于单选按钮值
- if 语句 (jQuery) 中的两个条件
- 在 if 语句 jquery 中使用此父级
- 语法错误: 缺少 ;在语句 Jquery 之前
- 如何触发if语句jQuery
- 将生成if-else语句jquery的脚本
- 多重选择值if语句jQuery
- 表的最后一个td与if语句- jquery
- 目标条件语句jQuery中提到的单个元素
- 正在生成if语句JQuery