Question

我的随机引号不起作用（每次点击按钮时都应显示随机引号）。发生了什么事？我的同事们也很难过。它以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;
}

Answer 1

$("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类型的元素

Answer 2

许多答案，例如@ Kith，已指出您的选择器不正确，但您也试图使用未定义的变量访问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);

由于您在doc ready函数结束时调用nextQuote();，因此无论如何这两行都是冗余的，应该删除。

Answer 3

问题就在这里：

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，authorText和submit的DOM节点，而您想要的是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

Answer 4

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

Answer 5

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

var submitButton = $("#submit")

它使用selectors

的标准CSS语法

随机报价不会显示

5 个答案: