推文分享网址膨胀不工作内按钮点击功能

时间:2016-09-02 04:58:54

标签: javascript jquery asynchronous twitter

我目前正在使用引用APP,Jquery getJson来扩充elementes。我在将twitter的分享按钮集成到我的代码中时遇到了问题。出于某种原因,当我使用attr函数更改推文URL数据文本值时,我无法从API源中获取文本值。当我点击推文按钮时,我得到的是一个带有硬编码的新推文窗口文本。我的目的是在文本字段中设置quote + author。有什么想法让它发挥作用?我做了很多关于推特活动的研究和实验,但没有成功

我的HTML代码:

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">

        <!--[if lt IE 9]>
            <script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
        <![endif]-->
    </head>
    <body>

    <div id="btn-container" class="container">
      <p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
    </div>

    <div id="quote-container" class="container">
        <blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
        </blockquote>
        <footer id="author">Bill Bernback</footer>
    </div>

    <div id="share-container" class="container">
        <a href="https://twitter.com/share" class="twitter-share-button" data-text="Something other than page title">Tweet it</a>
    </div>


    <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

我的JS代码:

<pre><code>var quote;
var author

$(document).ready(function(){
  $(".btn").click(function(){
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
      quote = getQuote[0].content;
      author = getQuote[0].title;

      $("#quote").html(quote);
      $("#author").text(author);

      $('.twitter-share-button').attr('data-text',author); // not working

    });});});

0 个答案:

没有答案