2014-06-17 83 views
0

我的隨機報價不起作用(應顯示隨機報價每按一下按鈕)。這是怎麼回事?我的同事也很難過。它在javascript表單中工作,但是當將所有語法轉換爲jquery時,它不起作用。隨機報價不會顯示

HTML是在這裏:

<!DOCTYPE HTML> 
<html lang="en" manifest="quoter.manifest"> 
    <head> 

     <meta charset="UTF-8" lang="en" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

     <title>Quoter</title> 

     <script src="jquery-2.1.1.min.js"></script> 
     <script src="script.js" type="text/javascript"></script> 
     <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> 

    </head> 

    <body> 

     <section> 

      <header> 
       <div id="padmeheader"><h1>Bennett's Quoter</h1></div> 
       <nav></nav> 
      </header> 

      <main> 
      <div id="centerme"> 
       <button id="submit" type="button">Get new quote!</button> 
       <span id="quoteText"></span> 
       <span id="authorText"></span> 
      </div> 
      </main> 

      <footer> 
       &copy; 2014 
      </footer> 

     </section> 

    </body> 

</html> 

jQuery是在這裏:

$(function() 
{ 
    var quoteSpan  = $("quoteText"); //assign var to quoteText id contents 
    var authorSpan = $("authorText"); //assign var to authorText id contents 
    var submitButton = $('submit'); //assign var to button 

    var oldQuoteIndex = -1; 
    var newQuoteIndex; 

    var quotes  = [ 
     {'text': '"Whatever you are, be a good one."', 'author': '-Abraham Lincoln'}, 
     {'text': '"It has been my philosophy of life that difficulties vanish when faced boldly."', 'author': '-Isaac Asimov'}, 
     {'text': '"Enjoy life. There’s plenty of time to be dead."', 'author': '-Anonymous'}, 
     {'text': '"Every moment is a fresh beginning."', 'author': '-T.S. Eliot'}, 
     {'text': '"One day your life will flash before your eyes. Make sure it is worth watching."', 'author': '-Anonymous'} 
    ]; 

    quoteSpan.html(quotes[newQuoteIndex].text); //make HTML's quoteText random quote 
    authorSpan.html(quotes[newQuoteIndex].author); //make HTML's authorText random author 

    function nextQuote() { 
     do { 
      newQuoteIndex = Math.floor(Math.random() * quotes.length); 
     } while (newQuoteIndex == oldQuoteIndex); //if new index is duplicated, choose a new index 

     quoteSpan.html(quotes[newQuoteIndex].text); //make HTML's quoteText random quote 
     authorSpan.html(quotes[newQuoteIndex].author); //make HTML's authorText random author 

     oldQuoteIndex = newQuoteIndex; //make both indexes same, so 'while' randomizer executes every time 
    } 
    submitButton.click(nextQuote); 
    nextQuote(); 
}); 

CSS是在這裏:

a:link { 
    text-decoration: none !important; 
    color:black !important; 
} 

a:visited { 
    text-decoration: none !important; 
    color:red !important; 
} 

a:active { 
    text-decoration: none !important; 
    color:green !important; 
} 

a:hover { 
    text-decoration: none !important; 
    color:blue !important; 
    background-color:white !important; 
} 

body { 
    margin: 0px auto; 
    /*margin:1em 1em 1em 1em;*/ 
    text-align:center; 
    background-color:white; 
    font-weight:normal; 
    font-size:12px; 
    font-family: verdana; 
    color:black;  
} 

footer { 
    bottom:20px; 
    width:100%; 
    margin-top:200px; 
    position:absolute; 
} 

#quoteText { 
    font-style:italic; 
    font-size:3em; 
    color:black; 
    width:600px; 
    background-color:white; 
    display:inline-block; 
    margin-bottom:30px; 
    margin-top:20px; 
} 

#authorText { 
    font-style:bold; 
    font-size:1.5em; 
    color:grey; 
    width:600px; 
    height:50px; 
    display:inline-block; 
} 

#centerme { 
    text-align:center; 
    margin:0px auto; 
    display:inline-block; 
    width:600px; 
} 

#submit { 
    width:100px; 
    height:100px; 
    display:inline-block; 
    margin-bottom:20px; 
    margin-top:10px; 
    font-size:1.3em; 
} 

#padmeheader { 
    height:50px; 
    background-color:black; 
    margin-bottom:50px; 
} 

h1 { 
    color:white; 
    text-align:center; 
    margin: 0px auto; 
    margin-bottom:50px; 
    width:100%; 
    background-color:black; 
    padding-top: 13px; 
} 
+4

如果它在JavaScript中工作,爲什麼你會在jQuery中轉換它? –

+0

@ Karl-AndréGagnon因爲學習嗎? –

回答

1

當在jquery中通過ID選擇項目時,您需要使用「#」。例如,它應該是:

var submitButton = $("#submit") 

它使用selectors

4
$("submitButton"); 
$("quoteText"); //assign var to quoteText id contents 
$("authorText"); //assign var to authorText id contents 

應該

$("#submitButton"); 
$("#quoteText"); //assign var to quoteText id contents 
$("#authorText"); //assign var to authorText id contents 

ID選擇需要的ID前面有井號標籤,否則它在尋找類型的元素quoteText

2

的問題就在這裏:

var quoteSpan  = $("quoteText"); //assign var to quoteText id contents 
var authorSpan = $("authorText"); //assign var to authorText id contents 
var submitButton = $('submit'); //assign var to button 

您選擇命名quoteText DOM節點,而你想要什麼authorTextsubmitid

var quoteSpan  = $("#quoteText"); //assign var to quoteText id contents 
var authorSpan = $("#authorText"); //assign var to authorText id contents 
var submitButton = $('#submit'); //assign var to button 

請看看所有的selectors

+1

可能有人解釋downvote? –

1

正確使用選擇符#使用ID和。對於類

var quoteSpan  = $("#quoteText"); //assign var to quoteText id contents 
var authorSpan = $("#authorText"); //assign var to authorText id contents 
var submitButton = $('#submit'); //assign var to button 
3

答案很多,比如@僑威的標準CSS語法,都指出你的選擇是不正確的,但你也正在試圖訪問帶有未定義變量的quotes數組。

var oldQuoteIndex = -1; 
var newQuoteIndex; 

var quotes = ... 

//newQuoteIndex is undefined here. 
quoteSpan.html(quotes[newQuoteIndex].text); //make HTML's quoteText random quote 
authorSpan.html(quotes[newQuoteIndex].author); 

由於您呼叫nextQuote();在文檔準備功能的結束,這兩條線是多餘無論如何,應予刪除。

+0

newQuoteIndex = Math.floor(Math.random()* quotes.length); 它應該在那裏定義。 編輯:沒關係,你是絕對正確的。 –

+1

@kith但是,在第一次使用newQuoteIndex後定義的函數中 –