Question

我有一个关于使用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>

gallery.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);
});
    });

Answer 1

您正在尝试访问尚未加载到DOM中的元素。顾名思义，AJAX是“异步的”。因此，您需要在load（）完成之前在front元素上设置源。使用完成回调来解决此问题。

$( '#content').load('index.html' + ' #content', function(){
  $( '#front' ).attr('src', imageSource);
}).hide().fadeIn('slow');

更改AJAX加载内容的元素

1 个答案: