jquery列表选择变量

Question

我有这个jquery列表元素与我用来教自己编码的示例应用程序一起使用。我有不同的价值观被列入清单。问题在于我试图找出用户选择的列表上的哪个项目，然后我可以返回到数据库并将与该项目有关的所有信息拖出到屏幕上。

我试着做它迄今的方法是这样的：

<script type="text/javascript"> 
    $(document).on('pagebeforeshow', '#index', function(){ 
     $("#list").empty(); 
     var url="http://localhost/test/login/json4.php"; 
     $.getJSON(url,function(json){ 
      //loop through deals 
      $.each(json.deals,function(i,dat){ 
       $("#list").append("<li><a id='"+dat.dealid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>"); 
       $(document).on('click', '#'+dat.dealid, function(event){ 
        if(event.handled !== true) // This will prevent event triggering more then once 
        { 
         listObject.itemID = $(this).attr('id'); 
         $.mobile.changePage("#index2", { transition: "slide"}); 
         event.handled = true; 
        } 
       });    
      }); 
      $("#list").listview('refresh'); 
     }); 
    }); 

    $(document).on('pagebeforeshow', '#index2', function(){  
    $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID); 
    }); 

    var listObject = { 
     itemID : null 
    }  
</script> 

JSON数组被创建的所有列表中的项目，并在屏幕上正在呈现。然后，我设法做到的是，当用户进行选择时，它会进入一个新页面（索引2），并在索引2中指出哪个数据库字段ID与所选项目相关联。

我一直在尝试过去的几天找到一种方法，我可以把这个ID号码，并把它带回到数据库端，但我一直没有运气 - 它要么打破我的原始列表时我添加新的代码或只是没有任何反应！

如果有人能帮助我，我会非常感激！这似乎是一个核心课程，大多数人在我的位置应该学习，所以如果有人想教这里做什么，这将是太棒了！

在此先感谢您的帮助！祝大家周末愉快！

Answer 1

你应该做的是这样的：

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#list").empty(); 
    var url="http://localhost/ce/json4.php"; 
    $.getJSON(url,function(json){ 
     //loop through deals     
     $.each(json.deals,function(i,dat){ 
      $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>"); 
      $(document).on('click', '#'+dat.dealid, function(event){ 
       if(event.handled !== true) // This will prevent event triggering more then once 
       { 
        dealObject.dealID = $(this).attr('id'); 
        dealObject.dealName = $(this).find('h6').html(); 
        dealObject.description = $(this).find('h5').html(); 

        $.mobile.changePage("offer.php", { transition: "slide"}); 
        event.handled = true; 
       } 
      });    
     }); 
     $("#list").listview('refresh'); 
    }); 
}); 

$(document).on('pagebeforeshow', '#index2', function(){  
    $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description); 
    $('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName); 
    $('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID); 


}); 

var dealObject = { 
    dealID : null, 
    dealName : null, 
    description: null 
} 

Answer 2

您可以使用localStorage临时存储itemID，然后将其返回到下一页。

localStorage['itemID'] = $(this).attr('id'); 

然后retrive它在＃索引2：

itemID = localStorage['itemID'];