Question

我使用.getJSON方法获取data.json文件，当我点击“new quote”按钮时，它运行良好。然而，Twitter和Tumblr不工作，起初，我将他们的href设置为＃，在我点击它们之后，他们的href将变为相应的一个。但是每次我点击twitter和Tumblr时，他们都不会去在正确的页面上，其网址始终显示为“http://localhost/freecodecamp.html#”。哪里错了？我该如何实现这个功能？提前谢谢！
p.s.my data.json文件如下所示：
{“quote”：[在那里引用]，“作者”：[pur作者在他们的]，“backgroundC”：[把颜色放在那里]}

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>

Answer 1

您正在#登录id

 <a target="_blank" id="#a-twitter" href="#">
 <a target="_blank" id="#a-tumblr" href="#">

并在$(#a-tumblr)和$(#a-twitter)

上举办活动

只需从#个ids标记中移除a即可，

喜欢

  <a target="_blank" id="a-twitter" href="#">
 <a target="_blank" id="a-tumblr" href="#">

为什么要改变＆lt; a＆gt; element的href在报价机器上不起作用

1 个答案: