Wordpress API - 單擊固定鏈接 - 獲取單個帖子並顯示

Question

喜歡在單擊時獲得單個WP API 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將爲空，它會導致一個未定義的錯誤。

如果你想要的工作，那麼你就必須建立一個新的變量來分配數據，當您運行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; 

}); 
}