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

时间:2017-03-05 21:10:22

标签: javascript jquery function

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

当我将它放在外面时它不起作用,因为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);


});

  });    


  });

2 个答案:

答案 0 :(得分: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 :(得分: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());