随机报价不会显示

我的随机报价不起作用（应显示随机报价每按一下按钮）。这是怎么回事？我的同事也很难过。它在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; 
}

来源

2014-06-17 user3689753

如果它在JavaScript中工作，为什么你会在jQuery中转换它？ –

@ Karl-AndréGagnon因为学习吗？ –

当在jquery中通过ID选择项目时，您需要使用“＃”。例如，它应该是：

var submitButton = $("#submit")

它使用selectors

来源

2014-06-17 20:28:15

$("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

来源

2014-06-17 20:27:19

的问题就在这里：

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节点，而你想要什么authorText和submit是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

请看看所有的selectors

来源

2014-06-17 20:27:38

可能有人解释downvote？ –

正确使用选择符＃使用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

来源

2014-06-17 20:27:54

答案很多，比如@侨威的标准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();在文档准备功能的结束，这两条线是多余无论如何，应予删除。

来源

2014-06-17 20:43:54

newQuoteIndex = Math.floor（Math.random（）* quotes.length）; 它应该在那里定义。编辑：没关系，你是绝对正确的。 –

@kith但是，在第一次使用newQuoteIndex后定义的函数中 –

随机报价不会显示

回答

相关问题