1

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();
            },
4

1 に答える 1

1

更新された回答

クリックリスト項目に続くすべてのリンクの配列を作成します。

デモページ

マークアップ/やんちゃなボタン！

<a class="next" data-role="button" href="" id="" data-inline="true">Next</a>

コード

// Create Array
var links = [];

$('li').on('click', 'a', function (e) {

 // Find all links after the clicked link/list item
 var list = $(this).closest('li').nextAll('li').find('a');

 // Wipe array
 links = [];

 // Push href and id of each link
 if (list.length > 0) {
    $.each(list, function () {
        links.push({
            'href': $(this).attr('href'),
                'id': $(this).attr('id')
        });
    });
 }
});

// Next song button
$('a.next').on('click', function (e) {

 // Update (Next) button href and id
 if (links.length > 0) {
  var nexthref = links[0].href;
  var nextid = links[0].id;
  $('a.next').attr('href', nexthref);
  $('a.next').attr('id', nextid);

  // Remove used values from Array
  links.splice(0, 1);
}
 // Move to next song
 $.mobile.changePage($(this).attr('href'), {
    transition: 'flip'
 });
});

コントロール- 「次へ」および「戻る」ボタンの表示/非表示 (私のデモに基づく)

// Last page
var lastpage = '#' + $('body').find('div[data-role="page"]').last()[0].id;

// Hide 'Next' button / Add button 'Back' button
$(document).on('pagebeforeshow', lastpage, function () {
 $('a.next').hide();
 $('[data-role=content]').append('<a class="last" data-role="button" href="#songs" data-inline="true">Back to Index</a>').trigger('create');
});

// Remove 'Back' button / show 'Next' button
$(document).on('pagebeforeshow', '#songs', function () {
 $('a.next').show();
 $('a.last').remove();
});
于 2013-03-30T23:59:19.067 に答える