Question

我已经编写了以下代码以使用javascript创建url href：

$(document).ready(function() {

var js = [{"title":"New ECB Boss Christine Lagarde Made A Serious Bitcoin Warning","link":"https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/","text":"Bitcoin and other crypto-assets have long divided traditional economists and bankers with some warning over their instability and others ...","img":"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-cf7C5AWRZ2mt1qip3sV9MzLok1tGn0CAInRO6kqP1J5b_VQQdQRmKXW8NsNi2BTxOYnSl-Q"},{"title":"Bitcoin Approaches $11500 as Top Cryptos See Gains","link":"https://cointelegraph.com/news/bitcoin-approaches-11-500-as-top-cryptos-see-gains","text":"Saturday, July 6 — most of the top 20 cryptocurrencies are reporting moderate gains on the day by press time, as Bitcoin (BTC) hovers just ...","img":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdGcmi26RdOCRqaQ0kQ8raWmw2uA7PHv3Oi936yUNA8IQN9OhXKS6Rar8gBF_7Jwd_GvRw2UA"}]

for (var i = 0; i < js.length; i++) {
    console.log('<div><a href='+js[i].link+'>'+js[i].title+'</a></div>')
    $('body').append('<div><a href='+js[i].link+'>'+js[i].title+'</a></div>')
/*   $('body').append('<div>'+js[i].text+'</div>') */
}

});

此问题是： “新欧洲央行老板克里斯汀·拉加德提出了严重的比特币警告”， “顶级加密货币见涨，比特币逼近11500美元”呈现为href

如何为两个js数组元素生成href？生成href的代码是相同的，因此js数组中是否存在引起这种不一致的值？

jsfiddle：https://jsfiddle.net/adrianfiddleuser/jvq7ogk5/66/

Answer 1

问题是链接末尾的斜杠：

"link":"https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/"

结果

$('body').append('<div><a href=https://example.com/foo/>title</a></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

基本上，jQuery将/>之前的/>title</a>误解为自动关闭标签。但是<a>在HTML中不是自动关闭的，即使使用/>：

<!-- Renders properly - the tag does not self-close: -->
<a href=https://example.com/>click</a>

改为用引号将属性引起来，例如<a href="https://example.com/">title</a>：

var js = [{
  "title": "New ECB Boss Christine Lagarde Made A Serious Bitcoin Warning",
  "link": "https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/",
  "text": "Bitcoin and other crypto-assets have long divided traditional economists and bankers with some warning over their instability and others ...",
  "img": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-cf7C5AWRZ2mt1qip3sV9MzLok1tGn0CAInRO6kqP1J5b_VQQdQRmKXW8NsNi2BTxOYnSl-Q"
}, {
  "title": "Bitcoin Approaches $11500 as Top Cryptos See Gains",
  "link": "https://cointelegraph.com/news/bitcoin-approaches-11-500-as-top-cryptos-see-gains",
  "text": "Saturday, July 6 — most of the top 20 cryptocurrencies are reporting moderate gains on the day by press time, as Bitcoin (BTC) hovers just ...",
  "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdGcmi26RdOCRqaQ0kQ8raWmw2uA7PHv3Oi936yUNA8IQN9OhXKS6Rar8gBF_7Jwd_GvRw2UA"
}]

for (var i = 0; i < js.length; i++) {
  $('body').append('<div><a href="' + js[i].link + '">' + js[i].title + '</a></div>')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者，为了更加优雅和安全，而不是手动编写HTML，而是显式创建一个<a>，并将其分配给其href属性及其textContent：

var js = [{
  "title": "New ECB Boss Christine Lagarde Made A Serious Bitcoin Warning",
  "link": "https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/",
  "text": "Bitcoin and other crypto-assets have long divided traditional economists and bankers with some warning over their instability and others ...",
  "img": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-cf7C5AWRZ2mt1qip3sV9MzLok1tGn0CAInRO6kqP1J5b_VQQdQRmKXW8NsNi2BTxOYnSl-Q"
}, {
  "title": "Bitcoin Approaches $11500 as Top Cryptos See Gains",
  "link": "https://cointelegraph.com/news/bitcoin-approaches-11-500-as-top-cryptos-see-gains",
  "text": "Saturday, July 6 — most of the top 20 cryptocurrencies are reporting moderate gains on the day by press time, as Bitcoin (BTC) hovers just ...",
  "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdGcmi26RdOCRqaQ0kQ8raWmw2uA7PHv3Oi936yUNA8IQN9OhXKS6Rar8gBF_7Jwd_GvRw2UA"
}];

js.forEach(({ link, title }) => {
  $('<div><a></a></div>')
    .appendTo('body')
    .find('a')
    .prop('href', link)
    .text(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

这是因为无法正确呈现的链接以/结尾，最后您得到类似<a href=link/>和/>的信息，而jQuery解释为{{1 }}标签，因此基本上将其重写为<a>。您需要在引号之间放置链接以避免这种行为。

没有使用jQuery呈现href

2 个答案: