如何在JSON上添加超链接列表项？

我在json遇到问题。这里是我的list.js. 无论如何，我使用json2html.js html模板引擎。如何在JSON上添加超链接列表项？

var mylist = [ 
{ "name": "Pizza", "pic":"pizza.jpg", "type":"Food", "desc":"Bla bla","page":"pizza.html"}, 
{ "name": "Donut", "pic":"Donut.jpg", "type":"Food", "desc":"Bla bla.","page":"donut.html"},]; 

var rule_list = 
    {"tag": "li", "children": [ 
     {"tag":"a","href":"src/$(page)",}, 
     {"tag":"img","src":"res/i/${pic}","html":""}, 
     {"tag":"div","class":"li-title","html":"${name}","children":[ 
     {"tag":"p","html":"${type}","children":[ 
       {"tag":"br","html":"${desc}"} 
      ]} 
     ]} 
]}; 

var content_list = json2html.transform(mylist,rule_list); 
document.write('<ul id="search_list" class="listview">'+ content_list + '</ul>');

，这是我的HTML

<!DOCTYPE html><html><head><title> test </title> 
    <script type="text/javascript" src="../js/json2html.js"></script> 
    <script type="text/javascript" src="../js/jquery.js"></script> 
</head><body onload="loaded()"> 
    <div id="mycontent"> 
<script type="text/javascript" src="fb-res.js"></script> 
    </div> 
</body>

如何添加<a href="...html">为从JSON生成的每个<li>？我已经在上面试过了，链接没有出现。

对不起，我的英语不好。谢谢你们

来源

2014-09-05 user3408707

你试过我的代码？我认为它的作品... – 2014-09-05 11:33:41

仍然无法正常工作。什么都没发生。我已经尝试了几个小时。无论如何，我上面编辑了我的代码，我希望你明白我的意思。谢谢:-) – user3408707 2014-09-06 05:04:45

你有无效的'rule_list'去掉最后一个']};'，这里是[工作版本]（http://jsfiddle.net/d3jbsh07） – 2014-09-06 05:32:05

我发现简单的黑客，很简单。作品像一个魅力，突然间我笑了起来。简单的解决方案是，我们必须添加一些a.divclass并使其可点击。把它放在json中。

的CSS

a.page-link{ 
    z-index:2; /* Must above the <li> */ 
    position:absolute; 
    width:100%; 
    min-height:95px; /* depend on <li> height */ 
    height:100%; /* use it when each <li> have different height */ 
}

的JSON（使用json2html模板引擎）

var mylist = [ 
    { "name": "Pizza", "pic":"pizza.jpg", "type":"Food", "desc":"Bla bla.", "link":"src/pizza.html"}, 
    { "name": "Donut", "pic":"donut.jpg", "type":"Food", "desc":"Bla bla.", "link":"src/donut.html"}, 
]; 

var rule_list = 
     {"tag": "li", "children": [ 
      {"tag":"a","href":"${link}","class":"page-link"}, 
      {"tag":"img","src":"res/i/${pic}","html":""}, 
      {"tag":"div","class":"li-title","html":"${name}","children":[ 
      {"tag":"p","html":"${type}","children":[ 
        {"tag":"br","html":"${desc}"} 
       ]} 
      ]} 
     ]}; 

var content_list = json2html.transform(mylist,rule_list); 
$('#page').html('<ul id="search_list" class="listview">'+ content_list + '</ul>'); 

document.write(''+content_list+'');

的HTML

<!DOCTYPE html><html><head><title> test </title> 
    <script type="text/javascript" src="../js/json2html.js"></script> 
    <script type="text/javascript" src="../js/jquery.js"></script> 
</head><body onload="loaded()"> 
    <div id="mycontent"> 
<script type="text/javascript" src="fb-res.js"></script> 
    </div> 
</body>

希望这简单的黑客可以帮助大家有同样的问题与我。如何为每个json数据创建超链接。

来源

2014-09-08 04:59:44 user3408707

我想，你可以做这样的：

// Add the list to the body 
var content_list = json2html.transform(mylist,rule_list); 
var list = $("<ul />").attr('id', 'search_list').addClass("listview").html(content_list); 
$("body").append(list); 

// Add links 
$.each($("#search_list").children(), function(i, item) { 
    var link = $("<a />").attr("href", mylist[i].name.toLowerCase() + ".html"); 
    $(this).append(link); 
});

的$("#search_list").children()方法发现列表中的所有李元素并追加相应的链接。

来源

2014-09-05 11:11:54

仍然无法正常工作。我在哪里放置代码？我试过了，放入html或js。但它不起作用。 – user3408707 2014-09-05 12:08:34

我编辑我的帖子，你必须把它放在js文件的末尾。但是，最好直接在html页面创建search_list，并在JavaScript中添加content_list ... – 2014-09-05 12:27:09

难以解决和理解。还是行不通。 :-( – user3408707 2014-09-06 08:01:47

仅供参考您的转换是错误的，变化$（页）到$ {PAGE}，它应该正常工作

var rule_list = 
{"tag": "li", "children": [ 
    {"tag":"a","href":"src/${page}",}, 
    {"tag":"img","src":"res/i/${pic}","html":""}, 
    {"tag":"div","class":"li-title","html":"${name}","children":[ 
    {"tag":"p","html":"${type}","children":[ 
      {"tag":"br","html":"${desc}"} 
     ]} 
    ]} 
]};

来源

2014-09-30 05:03:40

如何在JSON上添加超链接列表项？

回答

相关问题