我创建了一个显示 RSS 提要的网页(代码片段如下),但是,我正在努力让“阅读更多”链接自动从 RSS 提要加载每篇文章的 URL。
有什么想法吗?
代码如下:
<div class="card">
<div class="thumbnail"><img src=""></div>
<div class="text">
<p class="title" id="title"></p>
<p class="description" id="description"></p>
<div class="link"><a href="">Read more</a></div>
<p class="date" id="date"></p>
</div>
</div>
<br>
<div class="card">
<div class="thumbnail"><img src=""></div>
<div class="text">
<p class="title" id="title2"></p>
<p class="description" id="description2"></p>
<div class="link2"><a href="">Read more</a></div>
<p class="date" id="date2"></p>
</div>
</div>
<br>
<div class="card">
<div class="thumbnail"><img src=""></div>
<div class="text">
<p class="title" id="title3"></p>
<p class="description" id="description3"></p>
<div class="link3"><a href="">Read more</a></div>
<p class="date" id="date3"></p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script id="rendered-js" >
$.ajax({
url: 'https://api.rss2json.com/v1/api.json', //converting it to JSON
method: 'GET',
dataType: 'json',
data: {
rss_url: 'http://feeds.bbci.co.uk/news/world/rss.xml', //RSS FEED
count: 10 //HOW MANY ITEMS TO GET
} }).
done(function (response) {
if (response.status != 'ok') {throw response.message;}
console.log('====== ' + response.feed.title + ' ======'); //GENERIC CONSOLE LOG TEST
var item = response.items[0]; //GET A SPECIFIC ITEM
var item2 = response.items[1]; //GET A SPECIFIC ITEM
var item3 = response.items[2]; //GET A SPECIFIC ITEM
console.log(item.title);
var pubDate = item.pubDate;
var link = item.link;
var date = pubDate.slice(0, 10);
$("#title").html(item.title);
$("#description").html(item.description);
$("#link").html(item.link);
$("#date").html("Published: " + date);
var pubDate2 = item2.pubDate;
var date2 = pubDate2.slice(0, 10);
$("#title2").html(item2.title);
$("#description2").html(item2.description);
$("#link2").html(item2.link);
$("#date2").html("Published: " + date2);
var pubDate3 = item3.pubDate;
var date3 = pubDate3.slice(0, 10);
$("#title3").html(item3.title);
$("#description3").html(item3.description);
$("#link3").html(item3.link);
$("#date3").html("Published: " + date3);
var thumb = response.feed.image;
$("img").attr("src", thumb);
});
!function (a) {"use strict";a.fn.succinct = function (b) {var c = a.extend({ size: 240, omission: "...", ignore: !0 }, b);return this.each(function () {var b,d,e = a(this),f = /[!-\/:-@\[-`{-~]$/,g = function () {e.each(function () {b = a(this).html(), b.length > c.size && (d = a.trim(b).substring(0, c.size).split(" ").slice(0, -1).join(" "), c.ignore && (d = d.replace(f, "")), a(this).html(d + c.omission));});};g();});};}(jQuery);
//check browser size, truncate accordingly.
$(document).ready(function () {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize() {
if ($("img").css("max-width") == "300px") {
$(function () {
$('#description').succinct({
size: 150 });
});
} else {
$(function () {
$('#description').succinct({
size: 300 });
});
}
}
</script>
我写了这段代码,但不幸的是,它让所有的 URL 都一样。如何让“阅读更多”链接显示每篇文章? :)
$("a").attr("href", item2.link);
页面已经完成,我需要的只是“阅读更多”链接自动从 RSS 提要加载相关页面(这允许人们阅读新闻文章)。