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临时存储商品ID，并在下一页中检索它。

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

然后在＃index2：

中检索它

itemID = localStorage['itemID'];

Jquery列表选择变量

2 个答案: