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

然后在#index2中检索它：

itemID = localStorage['itemID'];