Question

我正在研究一个项目'报价生成器'。除了Twitter按钮，一切正常。它正在打开一个带有新推文框的新窗口，但它没有在框中填入所需的报价。我在这里有点困惑。我尝试了一切。所以一点帮助将非常感激。谢谢。

这是我的项目：https://codepen.io/buzz_lightyear/pen/BmdzaZ

var quotes = ["The Way Get Started Is To Quit Talking And Begin Doing.", "The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.", "Don't Let Yesterday Take Up Too Much Of Today.", "You Learn More From Failure Than From Success. Don't Let It Stop You. Failure Builds Character.", "It's Not Whether You Get Knocked Down, It's Whether You Get Up.", "If You Are Working On Something That You Really Care About, You Don't Have To Be Pushed. The Vision Pulls You.", "People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do", "Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.", "Entrepreneurs Are Great At Dealing With Uncertainty And Also Very Good At Minimizing Risk. That's The Classic Entrepreneur", "We May Encounter Many Defeats But We Must Not Be Defeated", "Knowing Is Not Enough; We Must Apply. Wishing Is Not Enough; We Must Do", "Imagine Your Life Is Perfect In Every Respect; What Would It Look Like?"];

function makeId() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $("#quote > h1").html(quotes[randomNumber]);
}

$(document).ready(function() {
  $("#press > button").click(function() {
    $("#quote > i").fadeOut("slow").fadeIn("slow");
    $("#quote > h1").fadeOut("slow", function() {
      makeId();
      $(this).fadeIn("slow");
    });
  });
});

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet">

<div id="header">
  <h1>My Quote Machine</h1>
</div>

<div id="quote">
  <i class="fa fa-quote-left" aria-hidden="true" style="font-size: 15px; bottom: 10px;"></i>
  <h1>I shall not waste my days in trying to prolong them.</h1>
</div>
<div id="press">
  <div id="icon">
    <a href="https://twitter.com/intent/tweet/?text=" target="_blank"><i class="fa fa-twitter fa-2x" id="twitterid" style="color: white"></i></a>
  </div>
  <button class="btn btn-lg">Quote</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript.js" type="text/javascript"></script>

Answer 1

您将推文意图中的text属性留空。

您最初需要提供此功能（因为您在HTML中硬编码了第一个引号）。

然后在shub deploy函数中动态更改文本属性。

https://codepen.io/anon/pen/YExdNY

HTML（我将twitterid移动到实际链接而不是图标）：

makeId

JS：

<a id="twitterid" href="https://twitter.com/intent/tweet/?text=I shall not waste my days in trying to prolong them." target="_blank">
  <i class="fa fa-twitter fa-2x"  style="color: white"></i>
</a>

修改：这行代码：

function makeId() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $("#quote > h1").html(quotes[randomNumber]);

  // get the twitter intent link
  var twitterid = $("#twitterid");
  // remove existing text attribute with quote
  // change with the newly generated quote
  twitterid.attr("href", twitterid.attr("href").split("text=")[0] + "text=" + 
  quotes[randomNumber]);
}

从twitterid链接获取href属性，通过text属性拆分href的值，然后再将其重新添加，但使用下一个引用。

Answer 2

您正在使用的Twitter网址需要添加到其末尾的文字

https://twitter.com/intent/tweet/?text=ADD_YOUR_QUOTE_HERE

因此，当用户点击鸟图标时，您只需要使用javascript将一些文字附加到网址中。

Twitter框不是自动填充报价

2 个答案: