随机报价生成器:使用Jquery的Tweet按钮

时间:2016-12-15 18:35:39

标签: javascript jquery

我正在制作一个随机引用生成器。但我无法通过Twitter分享。我正在获取Twitter页面,但推文的文本框是空的。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  <div id="div1">
  <p id="quote"></p>
  <p id="author"></p>
<button id="btn">getquote</button>
<div>
<a href="https://twitter.com/intent/tweet" target="_blank">
<button type="button" id="twitter-share-button">tweet</button>
</a>
  </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="script.js"></script>

  </body>
</html>

这是我的Javascript代码

var url1="http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";

//var url1=" http://date.jsontest.com/";


var getQuote=function(data){
    //console.log(data);
    var quot="https://twitter.com/intent/tweet?text=" + data.quoteText+data.quoteAuthor;
    console.log(quot);

    $('#quote').text(data.quoteText);
    $('#author').text(data.quoteAuthor);
    $('#twitter-share-button').attr("href", quot);
};

$(document).ready(function(){
$.getJSON(url1,getQuote,'jsonp');

});
$("#btn").on("click",function(){
    $.getJSON(url1,getQuote,'jsonp');

});

我随机获得引用但是在我的代码中单击tweet按钮并没有在Jquery中使用href更改.attr。我这样做了吗?

2 个答案:

答案 0 :(得分:0)

我不知道我是否只是遗漏了一些东西,但看起来你正在尝试更改按钮的href属性,但按钮没有href属性(可能不应该)。

$('#twitter-share-button').attr("href", quot);

相反,你想做

$('#twitter-share-anchor').attr("href", quot);

并给实际的锚点id:

<a id="twitter-share-anchor" href="https://twitter.com/intent/tweet" target="_blank">

答案 1 :(得分:0)

您已将href应用于该按钮,而不是其中包含<a>。由于<a>是您按钮的直接父级,因此您可以轻松更改$('#twitter-share-button').attr("href", quot);行以包含.parent(),如下所示:

$('#twitter-share-button').parent().attr("href", quot);