jquery - 如何创建 HTML 链接？

Question

我创建了一个包含各种数据的 JSON 文件：

[
  {
    "date": "17.06.",
    "event": "The Stoles gig",
    "url": "http://thestoles.com/"
  },
  {
    "date": "25.06.",
    "event": "The Editors release an EP",
    "url": "http://theeditors.com/"
  }
]

HTML 文件中的所有内容都正确呈现，但 URL 除外，它不显示为链接。

这是我的代码：

$(document).ready(function() {  
    $.getJSON('feeds.json', function(data){
        $.each(data, function(i, item){
            $('#feeds').append(item['date'] + item['event'] + item['url'] + "</br>");
        });
    });
});

有什么建议么？

Answer 1

就这样做...

您需要将链接放在<a>标签中...

$(document).ready(function() {  
$.getJSON('feeds.json', function(data){
    $.each(data, function(i, item){
        $('#feeds').append(item.date + item.event + "<a href='"+item.url+"'>"+item.url+"</a></br>");
    });
   });
 });

或者，如果您不想实际显示链接，而只是将事件名称超链接...

$(document).ready(function() {  
 $.getJSON('feeds.json', function(data){
    $.each(data, function(i, item){
        $('#feeds').append(item.date + "<a href='"+item.url+"'>"+item.event+"</a></br>");
    });
   });
 });

Answer 2

您必须通过锚标记来包围 URL：

$(document).ready(function() {  
    $.getJSON('feeds.json', function(data){
        $.each(data, function(i, item){
            $('#feeds').append(item['date'] + item['event'] + '<a href="'+item['url']+'">Link</a></br>');
        });
    });
});