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

How to add hyperlink list item on JSON?

本文关键字：超链接 列表 添加 JSON      更新时间：2023-09-26

我在使用json时遇到问题。这是我的列表.js。无论如何，我使用的是json2html.js html模板引擎。

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>

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

抱歉我英语不好。谢谢各位

我想，你可以这样做：

// 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()方法在列表中查找所有li元素，并附加相应的链接。

我发现了简单的破解方法，非常简单。工作起来很有魅力，突然我笑了。简单的解决方案是，我们必须添加一些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数据创建超链接。

FYI您的转换是错误的，请将$（page）更改为$｛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}"}
        ]}
    ]}
]};
相关文章：