我正在创建一个快速的小页面。我只是学习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);
});
})
答案 0 :(得分：1)
您必须使用attr（属性）功能来更改src元素。这是一个例子。我使您的代码更加动态，因此您可以根据需要设置任意数量的引号，而无需更改代码：
HTML：
<img id="MainProductImage" src="https://s-media-cache-ak0.pinimg.com/564x/2a/b4/e7/2ab4e74ad637f9c8ecb792b8b7d605a6.jpg" id="myImg" data-current-quote="0">
<h1>“Quote 1.”</h1>
<p>- Ida B. Wells</p>
Javascript：
$(document).ready(function(){
//Quotes/Image Array
var quotes = [
{ quote: "Quote1", img: "https://s-media-cache-ak0.pinimg.com/564x/2a/b4/e7/2ab4e74ad637f9c8ecb792b8b7d605a6.jpg"},
{ quote: "Quote2", img: "https://s-media-cache-ak0.pinimg.com/564x/af/52/03/af5203d09a0be9c9e655786c88c1d8b7.jpg"},
{ quote: "Quote3", img: "https://s-media-cache-ak0.pinimg.com/564x/04/37/3c/04373c4f98797b202d13b9882e137690.jpg"}
];
$("img").click(function(){
var img = $("#MainProductImage"),
//We look for the next quote, if it's the last we go to the beginning
currentQuote = img.data("current-quote") === quotes.length -1 ? 0 : img.data("current-quote") + 1,
nextQuote = quotes[currentQuote];
//Set the current quote index in a data attribute
img.data("current-quote", currentQuote);
$("h1").fadeOut(0);
//Change the text
$("h1").text(nextQuote.quote);
//Change the image
img.attr("src", nextQuote.img);
});
});
答案 1 :(得分：0)
var data = [
{
"CategoryID": 1,
"CategoryName": "Soler Power Plant",
"CategoryProducts": [
{
"ID": 1,
"Name": 'Commercial Solar Power Plant',
"SubTitle": 'Eco, Eco Friendly, Energy, Green, Solar',
"Brand": 'ACS',
"Usage": '',
"Type": '',
"Price": 'Rs 5 Lakh / Unit',
"Body_Material": '',
"Description": 'Having a pre-determined quality administration system, we are thoroughly involved in delivering Commercial Solar Power Plant.',
"ImageUrl": 'assets/images/Products/Sola-power-plant.jpg',
},
{
"ID": 2,
"Name": 'Industrial Solar Power Plants',
"SubTitle": 'Eco Friendly, Save Energy',
"Brand": 'ACS',
"Usage": '',
"Type": '',
"Price": 'Rs 5 Lakh / Unit',
"Body_Material": '',
"Description": 'So as to become a preferential business name, we are thoroughly engrossed in shipping an inclusive collection of Industrial Solar Power Plants.',
"ImageUrl": 'assets/images/Products/Industrial_Solar_Power_Plants.jpg',
},
{
"ID": 3,
"Name": 'On Grid Solar Plant',
"SubTitle": 'Eco Friendly, Save Energy',
"Brand": 'ACS',
"Usage": '',
"Type": '',
"Price": 'Rs 1.1 Lakh / Unit',
"Body_Material": '',
"Description": "We are the leading firm of On Grid Solar Plant. To sustain the quality, our products are made under the guidance of industry certified professionals.",
"ImageUrl": 'assets/images/Products/On_Grid_Solar_Plant.jpg',
},
{
"ID": 4,
"Name": 'On Grid Solar Power Plant',
"SubTitle": 'Eco Friendly, Save Energy',
"Brand": 'ACS',
"Usage": '',
"Type": '',
"Price": 'Rs 5 Lakh / Unit',
"Body_Material": '',
"Description": "We are the leading firm of On Grid Solar Power Plant. To sustain the quality, our products are made under the guidance of industry top professionals.",
"ImageUrl": 'assets/images/Products/On_Grid_Solar_Power_Plant.jpg',
},
{
"ID": 5,
"Name": 'Solar Power Plant',
"SubTitle": 'Eco Friendly, Save Energy',
"Brand": 'ACS',
"Usage": '',
"Type": '',
"Price": 'Rs 5 Lakh / Unit',
"Body_Material": '',
"Description": "We are the leading firm of Solar Power Plant. To sustain the quality, our products are made under the guidance of industry certified professionals.",
"ImageUrl": 'assets/images/Products/Solar_Power_Plant.jpg',
},
]
}
]
function GetProducts() {
var products = data;
$.each(products, function () {
//var product = products.filter(filterByID)
var product = this;
$('#ProductDetails').append('<h2 class="text-center">' + this.CategoryName + '</h2>');
var details = product;
$.each(details.CategoryProducts, function () {
tempData = tempData + '<div class="col-md-4 col-sm-6">' +
'<div class="project-box">' +
'<div class="frame-outer">' +
'<div class="frame">' +
'<img style="width:350px;" src="' + this.ImageUrl + '" class="attachment-340x220 size-340x220 wp-post-image" alt="">' +
'</div>' +
'</div>' +
'<div class="text-box">' +
'<h3><a>' + this.Name + '</a></h3>' +
'<div class="tags-row">' +
'<a class="link">' + this.SubTitle + '</a>' +
'</div>' +
'<p>' + this.Description + '</p>' +
//'<a href="javascript:ViewMore(' + this.ID + ')" class="btn-readmore">More Details</a>' +
'</div>' +
'</div>' +
'</div>';
});
$('#ProductDetails').append('<div class="row">' + tempData + '</div>');
tempData = '';
});
}
在这里，我自己的代码可能会帮助你。它不属于您的代码，但您可以理解，也许您需要这样做
答案 2 :(得分：0)
我创建了一个带引号和图像源的数组。我已经增加了一个计数器来定义数组的索引。我也做了这么做，所以一旦完成所有内容，报价就会消失，所以文字在淡出之前不会改变。
$(document).ready(function(){
// set array of quotes and images
var content = [
["“Quote 1.”", "https://i.ytimg.com/vi/pUMKFP4p2Lo/maxresdefault.jpg"],
["“Quote 2.”", "http://www.stevensegallery.com/460/300"],
["“Quote 3.”", "http://www.stevensegallery.com/300/200"],
["“Quote 4.”", "http://www.stevensegallery.com/460/300"],
["“Quote 5.”", "http://www.stevensegallery.com/300/200"],
["“Quote 6.”", "http://www.stevensegallery.com/284/196"],
["“Quote 7.”", "http://www.stevensegallery.com/300/200"],
["“Quote 8.”", "http://www.stevensegallery.com/460/300"],
["“Quote 9.”", "http://www.stevensegallery.com/300/200"],
["“Quote 10.”", "http://www.stevensegallery.com/284/196"],
];
// set counter to 1
var count = 1;
$("img").click(function(){
// check is end of array reached and start from beginning
count == content.length ? count = 0 : "";
// fade h1 out
$("h1").fadeOut(500, function() {
// use counter to get the correct index of array to change the h1 to the relevent quote
$("h1").text(content[count][0]);
// use counter to get the correct index of array to change the h1 to the relevent image source
$("img").attr("src", content[count][1]);
// fade h1 back in after everything else is done
$("h1").fadeIn(500);
// increment count by 1
count++;
});
});
});<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>