javascript - 随机报价机或推特当前报价不起作用

Question

jQuery on click 功能推特当前报价不工作。这里有什么问题。我必须构建随机报价机并发布当前报价。我已经设法实现了 JSON API，但无法弄清楚如何发布当前报价。请帮忙。

HTML:

<div class="container-fluid">
<div class = "well">


<div class="row">

<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>


<p class="author">-Alina Khachatrian</p>



<div class="buttons">
  <div class="row">
    <div class="col-xs-6">
      <a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
        <i class="fa fa-twitter fa-2x"></i>
      </a> 
 </div>
 <div class="col-xs-6">
   <button type="button"  class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
 </div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by <a href="https://github.com/edkiljak">Edgar Kiljak</a>.</p>
</footer>  
</div>
</div>

JS:

 $(document).ready(function(){
    $(".btn").on("click", function(){
        $.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {

  var html = "";
  var len = json.length;
  var index = Math.floor(Math.random() * len);
  var val = json[index];

  html += "<div class = 'newQuote'>";

  html += "<h3>'" + val.quote + "'</h3>";


  html += "</div>";
  $(".author").text(val.author);

  $(".text").html(html);

    $('#tweet-quote').on("click",function(){
       window.open("https://twitter.com/intent/tweet?text="+
      $(val.quote).text() +"&via=your-app-name&original_referer=your-url");
     });

   });
 });
});

Answer 1

我遇到的第一个问题是我什至看不到 Tweet Current Quote 的链接。我必须在 anchor 中添加文本:

  <a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
    <i class="fa fa-twitter fa-2x"></i>
  TWEET CURRENT QUOTE
  </a> 

第二:它弹出了新的 Twitter 窗口，但没有填充文本。在您的 onclick 代码中，$(val.quote).text() 是不必要的 - 只需使用 val.quote

第三:您会看到除了打开新的 Twitter 窗口外，它还会打开您自己的页面的另一个实例。这与您如何在 html 中定义 tweet-quote anchor 有关，但停止它的最简单方法是在您的 onclick 中添加 return false，这样 anchor 中的目标就不会火:

$('#tweet-quote').on("click",function(){
   window.open("https://twitter.com/intent/tweet?text="+
  val.quote +"&via=your-app-name&original_referer=your-url");return false;
 });

第四:如果您加载第二个“New Quote”，然后单击“Tweet This Quote”，您会看到它会打开两个 新窗口 -- 它会同时发布旧的推文和新报价。这是因为 on("click") 是累积的。在设置新功能之前，您应该清除任何现有功能:

$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
   window.open ... 

第五:通常当您在这里发布问题时，“不起作用”并不是一个充分的解释。您应该解释什么不起作用，或者什么与您想要的不同。错误消息(如果有)。您在控制台日志中看到的内容。有些人对此非常执着。有些人可能会对我为你做家庭作业感到厌烦。祝你好运!