Question

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

Answer 1

提升答案

在点击列表项后面创建所有链接的数组。

<强> Demo page

标记 / 顽皮的按钮！

<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'
 });
});

控件 - 显示/隐藏＆＃39;下一步＆＃39;和＆＃39;返回＆＃39;按钮（基于我的演示）

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

基于Jquery Mobile List创建一个数组

1 个答案: