感谢您查看我的问题。我对 HTML、JQuery 和 JSon 很陌生。我正在尝试通过一些在线教程和 www.lynda.com 培训自学。我正在尝试制作一个词汇表,在页面上动态显示术语列表,单击时会在标题中显示该术语及其下面的定义。经过搜索和实验后,我取得了进展,我已经从 JSon 对象填充了 ul 并链接到显示页面。但我不知道如何让显示页面工作。我以为答案就在这里:http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html但即使在 Dreamweaver 中,我似乎也无法实现这一目标。
这是 JSFiddle:http://jsfiddle.net/LParker/PSntK/3/
HTML:
<!-- Glossary -->
<div data-role="page" id="glossary">
<div data-role="header">
<h3>
Glossary
</h3>
</div>
<ul data-role='listview' data-inset='true' id='resultsList'>
<!-- keep empty for dynamically added items -->
</ul>
</div>
<!-- display -->
<div data-role="page" id="display">
<div data-role="header">
<h3>
Name Goes Here
</h3>
</div>
<div data-role="content">
<div>Definition goes here</div>
</div>
JavaScript:
var jsonObject = {
"results": [{
"term": "Term One",
"definition": "This is the definition for Term Two",
},
{
"term": "Term Two",
"definition": "This is the definition of Term Two",
}, {
"term": "Term Three",
"definition": "This is the definition for Term Three",
}],
"ok": "true"
}
var resultLength = jsonObject.results.length;
var listItems = [];
for (var i = 0; i < resultLength; i++) {
var term = jsonObject.results[i].term;
//Add result to array
listItems.push("<li><a href='#display'>" + term + " </a></li>");
}
//Append array to list and refresh
$('#resultsList').append(listItems.join(' '));
$('#resultsList').listview('refresh');
如有任何帮助,我们将不胜感激!
最佳答案
首先让我们解决一些问题:
- 在每个
definition
后去掉多余的逗号json 对象的成员。 - 输入您的
#resultsList
<div data-role="content"></div>
中的 ListView 容器。 - 提供从
#display
导航的方法返回#glossary
页面例如通过添加标准 jQM 返回按钮<a data-role="button" data-rel="back" data-icon="back">Back</a>
在#display
的标题中页。 - 使用 jQM 时,您需要使用正确的 event handlers
为了简洁起见,我将您的变量重命名为 jsonObject
至json
.
您可以以更简洁的方式填充 ListView :
$.each(json.results, function(i, term){
$('#resultsList').append('<li><a href="#display">' + term.term + '</a></li>')
});
$('#resultsList').listview('refresh');
现在,在这种特殊情况下,恕我直言,您不需要注入(inject)页面(尽管这当然可能),您只需更改 #display
中的内容即可。页面 pagebeforeshow
事件。
为了实现这一点,由于您的 json 对象全局可用,您只需获取单击的列表项的索引,将其传递给您的 #display
页面,使用它来访问 json 对象的结果数组以提取并显示术语及其定义。
传递索引的最简单方法是使用在 click
中设置的全局变量。事件处理程序。
var currentItem = 0;
...
$('#resultsList li').click(function(){
currentItem = $(this).index();
});
现在在pagebeforeshow
你做的事情
$('#display').on('pagebeforeshow', function(){
$(this).find('[data-role=header] .ui-title').text(json.results[currentItem].term);
$('#definition').html(json.results[currentItem].definition);
});
终于可以工作了 jsFiddle 为你。
关于json - 使用 JQuery Mobile 和 Json 动态注入(inject)页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15126672/