javascript - Jquery Mobile Listview Clicked Item - 将参数传递给另一个页面

Question

我有一个 index.html 页面。此页面还包含许多页面，如#home、#list #contacts 等。

在#list 部分，我从我的网页动态获取数据并生成 ListView 。我希望，当用户单击任何列表项时，重定向到#imageDetail 页面并将图像 URL 传递给页面并显示图像

这是#imageDetail 页面部分

    <div data-role="page"  id="detailedIMAGE" data-theme="a">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Image Detail</h1>
        </div>
            <div data-role="content">       
            <img id="imageDetayURL" name="imageDetayURL" src="glyphish-icons/158-wrench-2.png"/>
            <input type="text" disabled="disabled" id="brewername" name="brewername" />
            </div>
        </div>  
    </div>

下面的代码是我动态获取json数据的javascript代码。

    <script>
    $('#last5').live("click", function() {
        $.ajax({
            url: "http://mysqlservice.com/getdata.json",
            dataType: 'jsonp',
            success: function(json_results){
                $("#imageListDetay").html('');
                console.log(json_results);
                $('#imageListDetay').append('<ul data-role="listview" id="tweetul" data-theme="c"></ul>');
                listItems = $('#imageListDetay').find('ul');
                $.each(json_results.results, function(key) {
                    html = '<h3>'+json_results.results[key].screen_name+'</h3><span id="detailed_image">'+json_results.results[key].resim_url+'</span><img WIDTH=200 HEIGHT=100 src="http://mywebpage.org/upload/'+json_results.results[key].resim_url+'" /><p class="ui-li-bside"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
                    listItems.append('<li><a  name="imageDetayGoster" href="#detailedIMAGE">'+html+'</a></li>');
               });
                $('#imageListDetay ul').listview();
            },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                //error
            }
        });
    })


    $("#detailedIMAGE").live("pagebeforeshow", function (e, data) { 
         var brewername = $('#detailed_image',data.prevPage).text();
         $('#brewername').val(brewername);  
         $('#imageDetayURL').attr('src', 'http://mobil.harmankaya.org/'+brewername);
         alert(brewername);
     });
    </script>

问题是在页面更改 alert(brewername) 触发后。但是 列出所有图片 ListView 中列出的 url 不是我选择的。

我该如何解决这个问题

提前致谢。

Answer 1

jQM 文档:

• http://jquerymobile.com/test/docs/pages/page-dynamic.html

这只是引用文档，但如果您阅读该页面，它应该会让您了解如何完成此操作。

The application uses links with urls that contain a hash that tells the application what category items to display:

<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
    <li><a href="#category-items?category=animals">Animals</a></li>
    <li><a href="#category-items?category=colors">Colors</a></li>
    <li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>