私は簡単な小さなページを作成しています。私はJavaScriptを学んでいて、使い慣れたものを使っています。画像をクリックすると引用符が変わるページを作成することができました。さて、私は引用符でイメージを変更します。画像2をクリックすると、画像3は引用符3で表示されます。イメージをクリックして見積もりを変更しますか?
これはかなり簡単な作業ですが、私はできませんでした。簡単な解決策を見つける。私はこれに数時間を費やしました。これはうつ病の一種です。
<!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を::以下は、私はHTMLに持っているものであるhttps://aprilehrlich.github.io/dataint/
:ここ
ページです。ここ$(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);
});
})