我的随机引用程序不起作用(每次单击按钮时都应显示随机引用)。这是怎么回事？我的同事们也很困惑。它在 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>
© 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;
}
最佳答案
$("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 类型的元素
关于javascript - 随机报价不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24272671/