Javascript Jquery Mobile Listview单击了项-将参数传递到另一个页面
我有一个index.html页面。此外,该页面还包含许多页面,如主页、联系人列表等 在列表部分,我动态地从我的网页获取数据并生成listview。我希望,当用户单击任何列表项时,重定向到imageDetail页面并将图像URL传递到该页面并显示图像 这是imageDetail页面部分Javascript Jquery Mobile Listview单击了项-将参数传递到另一个页面,javascript,jquery,listview,jquery-mobile,Javascript,Jquery,Listview,Jquery Mobile,我有一个index.html页面。此外,该页面还包含许多页面,如主页、联系人列表等 在列表部分,我动态地从我的网页获取数据并生成listview。我希望,当用户单击任何列表项时,重定向到imageDetail页面并将图像URL传递到该页面并显示图像 这是imageDetail页面部分 <div data-role="page" id="detailedIMAGE" data-theme="a"> <div data-role="header" data-t
<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>
问题是在页面更改后,名称触发。但列出listview中列出的所有图像URL,而不是“我的选定对象”
如何解决此问题
提前感谢。jQM文档:
这只是引用文档,但如果你阅读了这一页,它应该会让你对如何完成这一点有一个想法
该应用程序使用带有URL的链接,这些链接包含一个散列,该散列告诉
应用程序将显示哪些类别的项目:
嗯,这是我的方式,效果很好 HTML Javascript
$("#myPage").live("pageshow",function(event){
// get your id from LINK and parse it to a variable
var json_list_callback = getUrlVars()[id];
// verify the URL id
if (json_list_callback === '') {json_list_callback === ''} //or what value you want
// define your path to JSON file generated by the ID declared upper
var json_URL = 'http://your.path.to.json.file.php.json?id=' + json_list_callback;
// get the JSON data defined earlier and append to your LIST
$.getJSON(json_URL,function(data){
var entries = data;
//populate our list with our json data
$.each(entries,function(index,entry){
// i use dummy data here, you can have whatever you want in youre json
$("#myList").append(
'<li>' +
// remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function
'<a href="page.html?id=' + entry.json_id + '">' + entry.json_title + '<\/a>' +
'<\/li>'
);
});
//must refresh listview for layout to render
$("#myList").listview("refresh");
});
});
//this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?"
// you can define your own symbol with this function
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
这对我来说就像一个符咒,我经常使用它 live事件已被弃用,请使用“on”
例如:$detailedIMAGE.onpagebeforeshow,函数e,数据{//code} 谢谢,但我现在明白了。如何将您的解决方案实现到我的代码中。我真的很困惑。上面描述的方法是通过变量用JSON条目填充列表。您可以根据自己的需要很好地添加代码。我对代码进行了注释,以帮助您了解更多信息。如果您是jQuery和jQuery Mobile的新手,请在外出之前搜索谷歌以获取相关文档,并使用这些文档制作应用程序libraries@aki任何开发人员都会试图理解这一切,然后他会寻求帮助。不要这么粗鲁。如果你仍然对此有问题,请随时查看my,它允许使用参数进行干净的URL导航
<div data-role="page" id="myPage">
<div data-role="content" id="myContent">
<ul data-role="listview" data-inset="true/false/whatever" id="myList"></ul>
</div>
</div>
$("#myPage").live("pageshow",function(event){
// get your id from LINK and parse it to a variable
var json_list_callback = getUrlVars()[id];
// verify the URL id
if (json_list_callback === '') {json_list_callback === ''} //or what value you want
// define your path to JSON file generated by the ID declared upper
var json_URL = 'http://your.path.to.json.file.php.json?id=' + json_list_callback;
// get the JSON data defined earlier and append to your LIST
$.getJSON(json_URL,function(data){
var entries = data;
//populate our list with our json data
$.each(entries,function(index,entry){
// i use dummy data here, you can have whatever you want in youre json
$("#myList").append(
'<li>' +
// remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function
'<a href="page.html?id=' + entry.json_id + '">' + entry.json_title + '<\/a>' +
'<\/li>'
);
});
//must refresh listview for layout to render
$("#myList").listview("refresh");
});
});
//this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?"
// you can define your own symbol with this function
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}