JSON文件中的超链接URL值

Hyperlinking URL value in JSON file

本文关键字：URL 超链接 文件 JSON      更新时间：2023-09-26

当JSON文件中的URL值显示在表中时，如何将其设置为超链接？

JSON-

{
  "one": "http://urltovideo.mp4",
  "two": "The second list item",
  "three": "The third list item"
}

jQuery

$.getJSON( "test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<div class='panel panel-default'><div class='panel-heading'>" + key + "</div><div     
    class='panel-body'><a href=''>" + val + "</a></li></div></div>" );
  });
  $( "<ol/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).fadeIn(900).appendTo( "body" );
});

您需要检查val是否包含链接：

$.each( data, function( key, val ) {
    var link = (val.indexOf('http') > -1) ? '<a href="' + val + '">' + val + '</a>' : val;
    items.push( '<div class="panel panel-default"><div class="panel-heading">' + key + '</div><div     
    class="panel-body">' + link + '</li></div></div>');
  });

此外，为了获得更干净的代码，应该将"用于HTML属性，如class="..."，将'用于Javascript字符串，如：'<a href="' + val + '">'

请参阅jsFiddle

相关文章：