代码之家 › 专栏 › 技术社区 › blue-sky

未使用jquery呈现

jquery javascript

blue-sky · 技术社区 · 5 年前

我编写了以下代码来使用javascript创建url-ref:

$(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>') */
}

});

这个问题是: “欧洲央行新任行长拉加德(christine lagarde)发出了一个严肃的比特币警告”,并没有作为 '比特币接近11500美元,顶级密码见收益'呈现为

如何为两个js数组元素生成href?生成Href的代码是相同的,那么JS数组中是否有导致这种不一致的值?

jsfiddle公司: https://jsfiddle.net/adrianfiddleuser/jvq7ogk5/66/

2 回复 | 直到 5 年前

CertainPerformance 5 年前

问题是链接末尾的斜杠:

"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> S是不在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>

Flash Thunder 5 年前

这是因为没有正确呈现的链接以 / 最后你得到了 <a href=link/> 和 /> 被jquery解释为 <a> 标记,所以它基本上重写为 <a href=link></a> 是的。为了避免这种行为,你需要在引用之间建立联系。