[英]JQuery and Dynamic sub list on separate div
I am trying to create a sub listview page separate from the typical caged one: 我正在尝试创建一个与典型的笼状页面分开的子listview页面:
This is what I'm trying to do: 这就是我想要做的:
STEP1 - Loops gets all the data and creates the list in the listview: STEP1-循环获取所有数据并在列表视图中创建列表:
$(document).ready(function() {
var data = {"id":[{"id":1,"title":"title1","bodytext":"sometext 1"},{"id":2,"title":"title2","bodytext":"sometext 2"},{"id":3,"title":"title3","bodytext":"sometext 3"}
}]
var output = ''
$.each(data.id, function(index, value){
output += '<li><a href="#mypage">'+value.title+'</a></li>';
$('#mypage').text(value.title); //will this be different for each item?
});
$('#mylistview').html(output).listview('refresh'); //Refresh the listview with new added data
});
STEP 2: 第2步:
The listview now looks like this: 现在,列表视图如下所示:
<ul id-"mylistview">
<li><a href="populate_#mypage_with_data_from_item_1">title1</a></li>
<li><a href="populate_#mypage_with_data_from_item_2">title2</a></li>
<li><a href="populate_#mypage_with_data_from_item_3">title3</a></li>
</ul>
STEP 3: 步骤3:
I have a pre-made template: 我有一个预制的模板:
<div id="mypage">
Data from selected item goes here
</div>
So, if I click on list item 1 mypage will look like this:
<div id="mypage">
Sometext 1
</div>
or if item 2 is clicked:
<div id="mypage">
Sometext 2
</div>
My problem is that no matter which item I click in the listview I always get the data from item 1. 我的问题是,无论我在列表视图中单击哪个项目,我总是从项目1中获取数据。
How can I maker it so each item has it's own data displayed? 我该如何制造它,以便每个项目都显示自己的数据?
$(document).ready(function() {
var data = {"ids":[
{"id":1,"title":"title1","bodytext":"sometext 1"},
{"id":2,"title":"title2","bodytext":"sometext 2"},
{"id":3,"title":"title3","bodytext":"sometext 3"}]};
var output = '',
myPages = $('.mypage'),
container = $('#mylistview');
$.each(data.ids, function(index, value){
output += '<li><a href="#mypage">'+value.title+'</a></li>';
myPages.eq(index).text(value.bodytext);
});
container.html(output);
container.on('click', 'a', function(e){
e.preventDefault();
var links = container.find('a');
alert(myPages.eq(links.index(this)).text());
});
});
Demo: http://jsfiddle.net/mDnE6/ 演示: http : //jsfiddle.net/mDnE6/
那是因为您只能有一个id呼叫“ pagetitle”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.