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);。

我想做的是将列表放在一个数组中，这样当用户单击其中一个列表选项时，它会根据搜索查询提取信息，或者?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。我遇到的问题是，这只能让用户一次播放一个 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 回答