javascript - 用于分享页面内容的 Twitter 按钮

Question

我正在做一个随机报价机，需要能够将报价分享到 Twitter，我设置了 Twitter 按钮，但似乎无法更改数据文本值以在弹出窗口中显示报价-上窗。我已经尝试添加 twttr.widgets.load() 但它没有帮助，还有其他建议吗？

HTML-

<div class="container">
  <div class="row">
    <div class="col-xs-4 centered">
      <button id="newQuote" class="btn btn-default">Click here for new quote</button>
    </div>
  <div class="row">
    <div id="quote" class="col-xs-12">

    </div> 
  </div>
  <div class="row">
    <div id="author" class="col-xs-4">

    </div>
  </div>
  <div class="row">
    <div id= "twitter-button" class="col-xs-12">
      <a class="twitter-share-button">
      Tweet
      </a>
      <!--javascript for twitter button-->
      <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))returnt;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
    </div>
  </div>
</div>

Javascript-

var quotes = [
  ['"She got a big booty so I call her big booty"', '2Chainz'], 
  ['"fjdkaljfdksla"', 'bhd'], 
  ['"fdhafjdahaa"', 'fndun'],
  ['"fjdkfjsdkfjdsiojdsvndio\"', 'fvdsw']
];

var quoteText = "";

$("#newQuote").click(function() {
  var randomNum = Math.floor(Math.random() * quotes.length);
  quoteText = quotes[randomNum][0] + " -" + quotes[randomNum][1] 
  $("#quote").empty();
  $("#author").empty();
  $("#quote").append(quotes[randomNum][0]);
  $("#author").append(" -"+quotes[randomNum][1]);
  createButton();
});

var createButton = function () {
  var twtr = $(".twitter-share-button");  
  twtr.attr("href", "https://twitter.com/share");
  twtr.removeAttr("data-text");
  twtr.attr("data-text", quoteText);
  twttr.widgets.load();
}; 

和代码笔的链接- http://codepen.io/Davez01d/pen/Ywaydd?editors=1010

Answer 1

您的代码的问题在于，当您尝试添加 data-text 时，twitter 小部件代码已经将您的 a 标签转换为 iframe 标签 属性。在调用 twttr.widgets.load() 之前，您需要重新创建初始 html 结构。

将 createButton 函数的内容替换为以下内容:

$('iframe.twitter-share-button,a.twitter-share-button').remove();
var twtr = '<a class="twitter-share-button"></a>';
$('#twitter-button').append(twtr);
$('.twitter-share-button').attr('href', 'https://twitter.com/share')
  .attr('data-text', quoteText);
twttr.widgets.load();