我有一个关于使用 Ajax 传递信息的问题。我有一个元素，其中包含一个包含多个部分的主页。每个部分都使用 ajax 加载。主页有一个图片库，可以使用加号和减号箭头浏览。 gallery.html 页面中的所有图片都以较小的尺寸显示。为了节省时间，我不在这里重现 css。 如果你查看 eh js 文件，你会看到主页有一个简单的功能，可以更改图像的来源以便浏览。
我想做的是，在图库页面上，当您点击图片时，不仅会加载主页，还会加载您点击的图片。
我的功能
$( document ).on('click', '.littleImages', function(e){
var imageSource = $(this).attr('src');
$( '#container' ).remove();
$( '#content').load('index.html' + ' #content').hide().fadeIn('slow');
$( '#front' ).attr('src', imageSource);
});
});
不工作。这是我第一次尝试用 ajax 做这样的事情。我认为您可以通过 ajax 请求传递信息，但不太确定如何去做。我该怎么做？谢谢。
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="header">
<div id="title"><h1>TITLE<span id="subtitle">SUBTITLE</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="index.html" class="current">HOME</a></li>
</ul>
</nav>
</div>
<section id="content">
<div id="container">
<div id="imagewrap">
<img src="Images/Images/Image1.jpg" id="front" />
<div id="previous" class="buttons"></div>
<div id="next" class="buttons"></div>
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
<div id="footer">
</div>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>
画廊.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="gallery" class="sections">
<img src="Images/Image1.jpg" class="littleImages">
<img src="Images/Image2.jpg" class="littleImages">
<img src="Images/Image3.jpg" class="littleImages">
<img src="Images/Image4.jpg" class="littleImages">
<img src="Images/Image5.jpg" class="littleImages">
<img src="Images/Image6.jpg" class="littleImages">
<img src="Images/Image7.jpg" class="littleImages">
<img src="Images/Image8.jpg" class="littleImages">
<img src="Images/Image9.jpg" class="littleImages">
<img src="Images/Image10.jpg" class="littleImages">
<img src="Images/Image11.jpg" class="littleImages">
<img src="Images/Image12.jpg" class="littleImages">
<img src="Images/Image13.jpg" class="littleImages">
<img src="Images/Image14.jpg" class="littleImages">
<img src="Images/Image15.jpg" class="littleImages">
<img src="Images/Image16.jpg" class="littleImages">
<img src="Images/Image17.jpg" class="littleImages">
<img src="Images/Image18.jpg" class="littleImages">
<img src="Images/Image19.jpg" class="littleImages">
<img src="Images/Image20.jpg" class="littleImages">
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
</html>
.js
$( document ).ready(function() {
$( "#imagewrap" ).hide();
function showPicture() {
$( "#imagewrap" ).fadeIn('slow');
}
setTimeout(showPicture, 2000);
$( "nav a" ).on('click', function(e){
e.preventDefault();
var url = this.href;
$( "nav a.current" ).removeClass("current");
$(this).addClass("current");
$( '#container' ).remove();
$( '#content').load(url + ' #content').hide().fadeIn('slow');
});
counter = 1;
$( '.buttons' ).on('click', function(e){
if (counter < 1 || counter > 5) {return false;}
var id = e.target.id;
if (id == "next" && counter < 5){counter++;
} else if (id == "previous" && counter > 1){counter--;}
getImage();
});
getImage = function() {
document.getElementById("front").src = "Images/Images/Image" + counter + ".jpg";
}
$( document ).on('click', '.littleImages', function(e){
var imageSource = $(this).attr('src');
$( '#container' ).remove();
$( '#content').load('index.html' + ' #content').hide().fadeIn('slow');
$( '#front' ).attr('src', imageSource);
});
});
最佳答案
您正在尝试访问尚未加载到 DOM 中的元素。顾名思义，AJAX 是“异步的”。因此，您试图在 load() 完成之前在 front 元素上设置源代码。使用完成回调来解决这个问题。
$( '#content').load('index.html' + ' #content', function(){
$( '#front' ).attr('src', imageSource);
}).hide().fadeIn('slow');
关于javascript - 更改 AJAX 加载内容的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43621958/