Wordpress API - 点击永久链接 - 获取单个帖子并显示

Question

喜欢在点击时获得单个帖子 WP API 并将其替换在主 div newsPostsContainer 中 - 有点像路由。 我正在成功显示来自外部来源的帖子列表。

如果有人可以帮助我的代码或推荐另一个库/客户端的例子来做到这一点，那就太好了。

这是我的代码。

window.onload = function(){
var newsPermalink = document.getElementById("news-Permalink");
var newsPostsContainer = document.getElementById("news-Posts-Container");
var externalDomain = "http://example.com";
var newDomain = "http://localhost.dev";

//----------------- WP API - News Content ------------------//

var newsRequest = new XMLHttpRequest();
newsRequest.open('GET', externalDomain + '/wp-json/wp/v2/posts?
filter[category_name]=news-and-events&?per_page=5&_embed=true');
function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
  var title = postsData[i].title.rendered;
  var newsHref = postsData[i].link;
  var newsHrefOutput = newsHrefOutput.replace(externalDomain, newDomain);
  if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
    ourHTMLString += '<a id="news-Permalink" href="'+newsHrefOutput+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
  }
  ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
  ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
}
newsRequest.onload = function() {
if (newsRequest.status >= 200 && newsRequest.status < 400) {
  var data = JSON.parse(newsRequest.responseText);
  createNEWS(data);

} else {
  console.log("News Request - We connected to the server, but it returned an error.");
}
};
newsRequest.onerror = function() {
  console.log("Connection error");
};
newsRequest.send();

//All works up to here
//??
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += postsData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}

};//end window onload

Answer 1

关于这部分代码：

if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += postsData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}

postsData 指的是什么？我会说它在这里失败了，因为 postsData 将为 null 并且会导致未定义的错误。

如果您希望它工作，那么您必须创建一个新变量以在运行 createNEWS() 函数时分配数据，然后在永久链接的 onClick 上调用该变量。

即

var globalPostData =  "";

....

function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
  var title = postsData[i].title.rendered;
  var newsHref = postsData[i].link;
  var newsHrefOutput = newsHref.replace(externalDomain, newDomain);
  if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
    ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
  }
  ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
  ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
//Assign your data here
globalPostData = ourHTMLString;
}

...

//Reference your new variable on click
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(globalPostData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += globalPostData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}