推特按钮无法正常工作。 jQuery的

Question

我正在建立一个随机报价机。 我有一个推特按钮可以分享报价。 它有效，但是只有在我首先单击“ Generate Quote”按钮之后。 如果我在页面加载后立即单击“ tweet”-它不起作用。 我知道这是因为我的$(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote); 代码位于$("#gen").on("click", function(){ ，但我不知道如何在此函数之外将其删除。

当我将其放置在外面时，它不起作用，因为thisQuote的值在$("#gen").on("click", function(){

当我尝试将所有代码放在$("#gen").on("click", function(){之前$("#gen").on("click", function(){它将停止工作。

在这种情况下，如何正确订购功能？

我的笔： http : //codepen.io/s4ek1389/pen/zZGNWw?editors=1010

$(document).ready(function(){
   var thisQuote = "";
   $("#gen").on("click", function(){

    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(json) {



    var author = "";
   var quote = "";

   $.ajaxSetup({cache:false});

  json.forEach(function(val){
    author+= val.title;    
   quote+= val.content;
    var shortQuote = quote.slice(3,-5);
 thisQuote = shortQuote + " - " + author; 

 $("#author").html(author);
  $("#mainquote").html(quote);
  })

     $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote);


});

  });    


  });

Answer 1

当页面加载完成时，您必须检索随机报价，而不仅仅是单击按钮时。

我做了一个单独的方法，所以它更易于阅读和维护。

尝试这个：

$(document).ready(function () {
    var thisQuote = "";

    getRandomQuote();

    $("#gen").on("click", function () {
        getRandomQuote();
    });

    function getRandomQuote() {
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function (json) {

            var author = "";
            var quote = "";

            $.ajaxSetup({ cache: false });

            json.forEach(function (val) {
                author += val.title;
                quote += val.content;
                var shortQuote = quote.slice(3, -5);
                thisQuote = shortQuote + " - " + author;

                $("#author").html(author);
                $("#mainquote").html(quote);
            })

            $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote);
        });
    }

});

CodePen：

http://codepen.io/anon/pen/PpzvvP

Answer 2

您可以在首次触发点击时将href分配给您的“ tweet按钮”

$("#gen").trigger("click");

http://codepen.io/sassoli/pen/yMJWZo

如果您需要以威廉·莎士比亚的默认句子开头，则可以添加

http://codepen.io/sassoli/pen/OpXYGM

 $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + $("#mainquote").text()+ " - "+ $("#author").text());