I've created a web page that displays an RSS feed (code snippet is below), however, I'm struggling to make the 'Read more' links automatically load the URL of each article from the RSS feed.
The code is as follows:
<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 JSONmethod: 'GET',dataType: 'json',data: {rss_url: 'http://feeds.bbci.co.uk/news/world/rss.xml', //RSS FEEDcount: 10 //HOW MANY ITEMS TO GET} }). done(function (response) { if (response.status != 'ok') {throw response.message;}console.log('====== '+ response.feed.title +' ======'); //GENERIC CONSOLE LOG TESTvar item = response.items[0]; //GET A SPECIFIC ITEMvar item2 = response.items[1]; //GET A SPECIFIC ITEMvar item3 = response.items[2]; //GET A SPECIFIC ITEMconsole.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>I've written this code, but unfortunately, it makes all of the URLs the same. How do I make the 'Read more' link show each article? :)
$("a").attr("href", item2.link); The page is complete, and all I need from here is for the 'Read more' links to automatically load up the relevant pages from the RSS feed (this allows people to read the news articles).