Question

点击功能上的jQuery来发布当前报价并不想工作。这里有什么问题。我必须建立随机报价机和推文当前报价。我设法做了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的链接。我不得不在锚中添加文字：

  <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锚点的方式有关，但最简单的方法是在onclick中添加return false，以便锚点中的目标不会触发：< / p>

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

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

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

第五：通常当你在这里发帖时，＆＃34;没有工作＆＃34;不是一个充分的解释。你应该解释什么不起作用，或者你的工作方式与你想要的不同。错误消息，如果有的话。你在控制台日志中看到了什么。有些人对此非常感兴趣。有些人可能会因为我为你做功课而感到尴尬。祝你好运！

随机报价机或推文当前报价不起作用

1 个答案: