随机报价生成器：带有 Jquery 的推文按钮答案

【问题标题】：Random Quote Generator : Tweet Button with Jquery随机报价生成器：带有 Jquery 的推文按钮
【发布时间】：2017-05-01 11:09:17
【问题描述】：

我正在制作一个随机报价生成器。但我无法通过推特分享。我得到一个推特页面，但推文的文本框是空的。

    <!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');

});

我随机获得报价，但在我的代码中单击推文按钮不会更改在 Jquery 中使用 .attr 的 href。我做得对吗？

【问题讨论】：

你怎么知道你的href 没有被添加？我刚刚制作了一个非常简单的 JSFiddle，以表明您的方法应该可以正常工作：jsfiddle.net/errd1p37/1。这也让我想到了下一个问题：你为什么要在button 中添加href？
href 已添加。我可以在控制台中看到。但是当我点击按钮时，它会转到https://twitter.com/intent/tweet 而不是https://twitter.com/intent/tweet?text=" + data.quoteText+data.quoteAuthor。所以我没有在文本框中看到推文。
您将href 应用于<button>，但您应该将其应用于<a>。只需将$('#twitter-share-button').attr("href", quot); 更改为$('#twitter-share-button').parent().attr("href", quot);。
谢谢桑蒂。我正在更改不存在的按钮的href。但是为什么控制台没有报错呢？
您的按钮存在！它在您的<a> 标签内：<button type="button" id="twitter-share-button">tweet</button>

标签： javascript jquery

【解决方案1】：

我不知道我是否只是遗漏了一些东西，但看起来您正在尝试更改按钮的 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">

【讨论】：

哦，是的！谢啦。但为什么我没有收到类似“按钮没有href 属性”之类的错误？你能解释一下吗？
href 是任何元素的合法属性，<a> 元素是唯一在默认情况下单击时会将您定向到 href 的元素。
您没有收到错误的原因是，在编码方面，实际上并没有发生错误：即 - 您向按钮元素添加了 href 属性，这不是用 HTML 术语做的最好的事情，但它也不是“无效的”。这是你可以在 jQuery 中做的事情，而且它正在完成。其次，您激活了主 URL twitter.com/intent/tweet 的 Twitter 链接，实际上这不是一个无效操作。您可以使用不附加任何变量的 twitter 链接，有些人想要这样做是因为他们想转到一个空白页面，所以这是一个合法的选择。

【解决方案2】：

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

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

【讨论】：