2017-03-05 180 views
0

我正在构建一个随机引用机器。我有一个推特按钮来分享报价。它工作,但只有在我点击“生成报价”按钮后。如果我在加载页面后直接点击“tweet” - 它不起作用。 我知道这是因为我的$(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote);代码在$("#gen").on("click", function(){之内,但我不知道如何在此函数之外将其删除。Tweet按钮无法正常工作。 jQuery

当我把它放在外面它不工作,因为价值的thisQuote VAR是内$("#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); 


}); 

    });  


    }); 

回答

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

1

可以触发点击第一时间将href分配给您的 “鸣叫按钮”

$("#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());