如何在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上添加超鏈接列表項？

回答

相關問題