jQuery Mobile 内にリストがあります。リストには、次のような ID 番号と検索クエリ番号が含まれます。
"<li><a href='./page.html?id=2' data-transition='slide' id=1>Name</a></li>";
と
"<li><a href='./page.html?id=10' data-transition='slide' id=2>Name</a></li>";
このリストは ajax コールバックから作成されるため、このようにページに出力されます$('#list').html(data);
。
私がしたいのは、ユーザーがリストオプションの1つをクリックすると、検索クエリに基づいて情報を取得するか?id=2
、ユーザーがボタンをクリックして次のリスト項目に移動できるように、配列内にリストを配置することですですid=2
。
したがって、検索クエリはデータベースから正しい情報を取得しますが、ID は配列内の位置です。
以下は、リストに ajax 関数からのコールバックを設定するコードです。
function trackscallback(rtndata)
{
var data="";
for(j=0;j<=rtndata.length -1;j++)
{
data = data + "<li><a href='./page.html?id="+rtndata[j].track_id+"' data-transition='slide' id="+rtndata[j].name+"><h3>" + rtndata[j].name + "</h3><p><strong>" + rtndata[j].a_name + "</strong></p><p>" + rtndata[j].genre+ "</p></a></li>";
}
$('#list').html(data);
$('#list').listview('refresh');
}
したがって、このコードは DOM にリストを作成し、ユーザーがクリックして詳細情報を取得したり、私の場合は mp3 を再生したりできます。私が抱えている問題は、これによりユーザーが一度に 1 つの mp3 しか再生できないことです。つまり、mp3 の再生が終了したら、ユーザーはリストに戻って再生する新しい mp3 を選択する必要があります。
私が欲しいのは、再生が完了した後にユーザーがリストからアイテムを選択した後、リストの次のアイテムに移動してそれを再生することです。
mp3 を再生するための私のコードは次のとおりです。
function playtrackcallback(rtndata)
{
track = rtndata.artist_name + " " + "-" + " " + rtndata.track_name;
picture = "<img src='"+rtndata.track_art_url+"'/>";
playingSongId = rtndata.track_id;
$('#songPicture').html(picture);
$('#songName').text(track);
playSong(rtndata);
}
function playSong(rtndata) {
//Stop the sound from playing
soundManager.destroySound(mySound);
//Save some variables
playingSong = rtndata.track_id;
//Create the sound and begin playing whenever!
soundManager.createSound({
id: mySound,
url: rtndata.track_url,
autoPlay: true,
stream: true,
onplay: function () {
setPauseState(false);
setPlayTime();
},