我正在建立一个项目,其中一个页面上有google新闻功能。我的代码以前可以正常工作,但是由于某种原因它已停止,我不确定原因。我不记得对其进行任何更改,但是我可能在不知不觉中这样做了。我真的可以用别人的帮助来浏览它。
(请原谅内联样式。这是临时措施。)
$(document).ready(function () {
$.ajax(
{
type: "GET",
dataType: "json",
cache: false,
url: "https://newsapi.org/v2/everything?q=bitcoin&apiKey=API-KEY-HERE",
success: function (data) {
for (var i = 0; i < 40; i++) {
var rTitle = data.articles[i].title;
var rAuthor = data.articles[i].author;
var rDes = data.articles[i].description;
var rUrl = data.articles[i].url;
var rImg = data.articles[i].urlToImage;
var rDate = data.articles[i].publishedAt;
$("#articles").append(
"<style>"
+ ".flip-card {background-color: white; width: 300px;height: 350px; perspective: 1000px; float:left; padding: 14px;}"
+ ".flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;}"
+ ".flip-card:hover .flip-card-inner {transform: rotateY(180deg);}"
+ ".flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden; border-radius:5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center;}"
+ ".flip-card-front {background: rgb(217, 155, 53); background: rgba(217, 155, 53, 1); color: black;z-index: 2;}"
+ ".flip-card-front-header {overflow-x: visible;}"
+ ".flip-card-front-body {text-align: center;}"
+ ".flip-card-front-footer {overflow-x: visible; text-align: center;}"
+ ".flip-card-front-title {overflow-x: visible; text-align: center; padding-top:8px;}"
+ ".flip-card-front {background: rgb(217, 155, 53); background: rgba(217, 155, 53, 1); color: black;z-index: 2;}"
+ ".flip-card-author-front {color: black; padding: 8px;}"
+ ".flip-card-author-back {color: black; padding: 8px;}"
+ ".flip-card-content-back {color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); padding: 8px;}"
+ ".flip-card-content-back-description {color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); padding: 8px; text-align:center;}"
+ ".flip-card-back {background: black; color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); transform: rotateY(180deg);z-index: 1;}"
+ "</style>"
+ "<a href='"+ rUrl +"'>"
+ "<div class='flip-card'>"
+ "<div class='flip-card-inner'>"
+ "<div class='flip-card-front'>"
+"<div class='flip-card-front-header'>"
+"<h2 class='flip-card-author-front'>" + rAuthor + "</h2>"
+"</div>"
+"<div class='flip-card-front-body'>"
+ "<img src='"+ rImg +"' alt='Image' style='height:150px; width:270px; max-height:150px; max-width: 270px; overflow: hidden; bottom:0px;'>"
+"</div>"
+"<div class='flip-card-front-footer'>"
+ "<h4 class='flip-card-front-title'>" + rTitle + "</h4>"
+"</div>"
+ "</div>"
+ "<div class='flip-card-back'>"
+ "<h2>" + rAuthor + "</h2>"
+ "<p class='flip-card-content-back'><small>Date :" + rDate + "</small></p>"
+ "<p class='flip-card-content-back-description'>" + rDes + "</p>"
+ "<p class='flip-card-content-back'>(Article Sample)</p>"
+ "</div>"
+ "</div>"
+ "</div> "
+ "</a>"
);
}
console.log(data);
}
})
});
<div class="scrollfeed" style="height:455px;">
<div class="responsive">
<script src="js/ajax_googlenews.js"></script>
<div id="articles"></div>
</div>
</div>