0
我正在創建一個快速小頁面。我只是學習JavaScript，它正在採取一些習慣。我能夠創建一個頁面，單擊圖像時更改引號。現在，我希望圖像可以隨引號一起更改。所以它將是：點擊圖片1，圖片2將出現引用2.點擊圖片2，圖片3將出現引用3.更改圖片和點擊報價？
這是一個非常簡單的任務，但我沒有能夠找一個簡單的解決方案我已經花了幾個小時，這有點令人沮喪。
這裏的頁面：https://aprilehrlich.github.io/dataint/
下面是我在HTML已經有了：
<!DOCTYPE html>
<html>
<head>
<title>Ida B. Wells</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img id="MainProductImage"" src="https://i.ytimg.com/vi/pUMKFP4p2Lo/maxresdefault.jpg" width="500px"" id="myImg">
<h1>「Quote 1.」</h1>
<p>- Ida B. Wells</p>
</body>
</html>
的JavaScript：
$(document).ready(function() {
var quote1 = "「Quote 1.」";
var quote2 = "「Quote 2」";
var quote3 = "「Quote 3」";
var quote4 = "「Quote 4」";
var quote5 = "「Quote 5」";
var quote6 = "「Quote 6」";
var quote7 = "「Quote 7」";
var quote8 = "「Quote 8」";
var quote9 = "「Quote 9」";
var quote10 = "「Quote 10」";
$("img").click(function() {
var currentQuote = $("h1").text();
$("h1").fadeOut(0);
if (currentQuote == quote1) {
$("h1").text(quote2);
}
if (currentQuote == quote2) {
$("h1").text(quote3);
}
if (currentQuote == quote3) {
$("h1").text(quote4);
}
if (currentQuote == quote4) {
$("h1").text(quote5);
}
if (currentQuote == quote5) {
$("h1").text(quote6);
}
if (currentQuote == quote6) {
$("h1").text(quote7);
}
if (currentQuote == quote7) {
$("h1").text(quote8);
}
if (currentQuote == quote8) {
$("h1").text(quote9);
}
if (currentQuote == quote9) {
$("h1").text(quote10);
}
$("h1").fadeIn(1000);
});
})