javascript - 如何在 javascript 中显示带有 .html 的链接

Question

我从 REST api 以 JSON 的形式获取文本。我这样显示这些数据：

$("#mytext").html(item.text);

但是，有时此文本太长。...more发生这种情况时，我想在末尾显示带有链接的文本子集。更多链接会将用户带到另一个页面。

我正在这样做：

if (item.text.length > 100)
  $("#mytext").html(item.text.substring(0,95)"+"....");  
else 
  $("#mytext").html(item.text);

如何附加更多链接？链接需要转到/moreinfo/${item.id}

Answer 1

我会避免使用.html. 如果您只处理文本，为什么不使用.text()？如果您在没有保护的情况下解析直字符串时遇到潜在的错误，您以后只会感谢自己。

尝试这个。

if (item.text.length > 100) {
  $('#mytext').text(item.text.substring(0, 95));
  $('<span>more</span>').appendTo($('#mytext'));
} else {
  $('#mytext').text(item.text);
}
$('#mytext span').click(function () {
  $('#mytext').text(item.text);
});

我确信必须有一种方法可以很好地制作动画。

Answer 2

您可以添加更多这样的链接 -

if (item.text.length > 100)
  $("#mytext").html(item.text.substring(0,95)+"...."+"<span class='more'>more</span>");  
else 
  $("#mytext").html(item.text);

并点击更多链接，显示全文 -

$(document.body).on('click','.more',function(){
  $("#mytext").html(item.text);
});

Answer 3

就像是：

var url = "/moreinfo/${item.id}";
$("#mytext").html(item.text.substring(0,95)+"....<a href='"+url+"'>more</a>");

Answer 4

只需将元素放在那里

IE。

$("#mytext").html(item.text.substring(0,95)"+"....<a href=\"/moreinfo/"+item.id+"\">more</a>");