0
私はdata.jsonファイルを取得するために.getJSONメソッドを使用し、「新しい見積り」ボタンをクリックするとうまくいきます。しかし、TwitterとTumblrは動作しません。最初にhrefを＃に設定します。クリックすると、hrefが対応するものに変更されます。しかし、TwitterとTumblrをクリックするたびに、正しいページに移動すると、そのURLは常に「http://localhost/freecodecamp.html#」と表示されます。どこが間違っていますか？どうすればこの機能を果たすことができますか？前もって感謝します！
{ "引用"：[そこに引用を置く]、 "著者"：、 "backgroundC" [自分でPUR著者]：[そこに色を入れる]}なぜ変更< a >エレメントのhrefが見積もり機で動作しません
psmyのdata.jsonファイルは、次のようになります
var i = 0;
var currentQuote = '';
var currentAuthor = '';
$(document).ready(function() {
$("#buttonQuote").on("click", function() { //when click the "new quote" button
$.getJSON("data.json", function(json) { //get data.json from server
var html = "";
while (i <= 6) { //loop the data inside the data.json file
html += "<p>" + json.quote[i] + "</p>";
html += "<p class='author'>" + json.author[i] + "</p>";
$("body").css("background-color", json.backgroundC[i]); //set the css
$(".box").css("color", json.backgroundC[i]);
$("#buttonQuote").css("color", json.backgroundC[i]);
$("a").css("color", json.backgroundC[i]);
$(".box").html(html); //change box div's innerhtml
currentQuote = json.quote[i];
currentAuthor = json.author[i];
i = (i == 6) ? 0 : i + 1;
break;
}
}); // the end of .getJSON
}); //the end of click the "new queto"
$("#a-twitter").on('click', function() { /*when click twitter, its href attribute will change to the corresponding one, this code I copy from the freeCodeCamp example.*/
$("#a-twitter").attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
});
$("#a-tumblr").on('click', function() { //when click tumblr, its href attribute will change to the corresponding one
$("#a-tumblr").attr('href', 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=' + encodeURIComponent(currentAuthor) + '&content=' + encodeURIComponent(currentQuote) + '&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button');
});
});body {
background-color: #e66b19;
height: 100%;
}
.box {
/*set the quote area css*/
text-indent: 30px;
margin: auto;
font-size: 24px;
font-weight: bold;
width: 500px;
height: 250px;
background-color: #ebebe0;
color: #e66b19;
padding: 5px;
}
.button-box {
/*set the link and button area css*/
margin: 10px auto;
width: 500px;
height: 50px;
}
a {
/*set <a> element applying on twitter and tumblr*/
display: inline-block;
text-align: center;
height: 40px;
width: 40px;
margin: 0px 10px;
color: #e66b19;
background-color: #ebebe0;
cursor: pointer;
}
#buttonQuote {
/*set the "mew quote" button*/
background-color: #ebebe0;
padding: 5px 20px;
font-size: 24px;
font-weight: bold;
color: #e66b19;
float: right;
}
.author {
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Quote Machine</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="box">Click New Quote Button</div>
<div class="button-box">
<a target="_blank" id="#a-twitter" href="#"><i class="fa fa-twitter" style="font-size:36px;"></i></a>
<a target="_blank" id="#a-tumblr" href="#"><i class="fa fa-tumblr" style="font-size:36px;"></i></a>
<button id="buttonQuote">New quote</button>
</div>
</body>
</html>
よう
に動作します。どうもありがとうございました –