2015-12-13 76 views
4

我試圖編寫一個「Tweet this」按鈕,在Twitter上用預先生成的文本打開一個新窗口。我現在得到的是Twitter上的一個窗口,其中包含我來自哪裏的URL。我正在使用JQuery API來執行此操作。我的項目鏈接是http://codepen.io/haldav/pen/KVpojP。而我的代碼是:我需要能夠按一個按鈕發出一個報價

$(document).ready(function() { 
    random(); 

function random() { 
var quotes = ["You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.", "Defeat is a state of mind; no one is ever defeated until defeat has been accepted as a reality.", "The moment has no yesterday or tomorrow. It is not the result of thought and therefore has no time.", "Real living is living for others.", "Never waste energy on worries or negative thoughts, all problems are brought into existence -drop them.", "A goal is not always meant to be reached. It often serves simply as something to aim at.", "Those who are unaware they are walking in darkness will never seek the light.", "Because one does not want to be disturbed, to be made uncertain, he establishes a pattern of conduct, of thought, a pattern of relationship to man etc. Then he becomes a slave to the pattern and takes the pattern to be the real thing."]; 

randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
quote = randomQuote.split("randomQuote"); 
$('.quote').text(quote[0]); 
    } 

$(".button").on("click", function() { 
random(); 
    }); 
}); 

我的HTML代碼:

<div class="text-center" id="jumbotron"> 
<h1 class="main-text">The Wisdom of Bruce Lee</h1> 
<p class="p-text">Although Bruce Lee died at a considerably young age, he was wise beyond his years. For my random quote machine, I chose to showcase some of his wisdom. For this exercise, I used a little JQuery, Bootstrap, CSS and HTML.  </p> 
<div class="well"> 
    <p class="quote" id="tweet"></p> 
</div> 
<div class="text-center"> 
    <button class="button" id="quote">New Quote</button> 
    <br /> 
    <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" data-size="large" target="_blank"> 
    <button type="button" class="btn btn-primary">Tweet this!</button></a> 
</div> 
<div footer> 
    <p class="text-center">Copyright © David C. Hall 2015</p> 
</div> 

我難倒。有什麼建議麼?謝謝。 編輯:我正在打開一個新窗口,但我需要它來顯示文本框中的隨機引號。

+0

在超鏈接中刪除'target =「_ blank」'。 –

回答

6

想通了!我所要做的只是添加

$(this).attr("href", 'https://twitter.com/intent/tweet?text=' + randomQuote); 

我的JS代碼。

-1

刪除target="_blank"超鏈接。

的Html應該

<div class="text-center" id="jumbotron"> 
    <h1 class="main-text">The Wisdom of Bruce Lee</h1> 
    <p class="p-text">Although Bruce Lee died at a considerably young age, he was wise beyond his years. For my random quote machine, I chose to showcase some of his wisdom. For this exercise, I used a little JQuery, Bootstrap, CSS and HTML.  </p> 
    <div class="well"> 
     <p class="quote" id="tweet"></p> 
    </div> 
    <div class="text-center"> 
     <button class="button" id="quote">New Quote</button> 
     <br /> 
<!--changes made here ---> 
     <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" data-size="large"> 
     <button type="button" class="btn btn-primary">Tweet this!</button></a> 
    </div> 
    <div footer> 
     <p class="text-center">Copyright © David C. Hall 2015</p> 
    </div> 
+0

感謝您的建議,但是當我做出這一改變時,我所得到的只是一個空白頁面。 – haldav

+0

您可以嘗試以包含。 –

+0

檢查https://dev.twitter.com/web/javascript/loading。該鏈接將幫助您打開彈出窗口小部件,然後打開新的選項卡窗口。 –

相關問題