Javascript 更改AJAX加载内容的元素_Javascript_Jquery_Html_Css_Ajax

Javascript 更改AJAX加载内容的元素

javascript jquery html css ajax

Javascript 更改AJAX加载内容的元素,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我有一个关于使用Ajax传递信息的问题。我有一个项目，其中包括一个主页，有不同的部分。每个部分都使用ajax加载。主页上有一个图片库，可以使用加号和减号箭头浏览。 html页面中所有图片的大小都较小。我不会在这里复制css来节省时间。如果您查看eh js文件，您将看到主页上有一个简单的函数，它可以更改图像的源以进行浏览我想做的是，在gallery页面上，当您单击图像时，不仅会加载主页，还会加载您单击的图片我的职能 $( document ).on('click', '.littleImag

我有一个关于使用Ajax传递信息的问题。我有一个项目，其中包括一个主页，有不同的部分。每个部分都使用ajax加载。主页上有一个图片库，可以使用加号和减号箭头浏览。 html页面中所有图片的大小都较小。我不会在这里复制css来节省时间。如果您查看eh js文件，您将看到主页上有一个简单的函数，它可以更改图像的源以进行浏览

我想做的是，在gallery页面上，当您单击图像时，不仅会加载主页，还会加载您单击的图片

我的职能

$( 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

$（文档）.ready（函数（）{
$（“#imagewrap”）.hide（）；
函数showPicture（）{
$（“#imagewrap”）.fadeIn（'slow'）；
}
设置超时（showPicture，2000）；
$（“导航a”）。在（'点击'，功能（e）{
e、 预防默认值（）；
var url=this.href；
$（“当前资产净值”）.removeClass（“当前”）；
$（此）.addClass（“当前”）；
$（“#容器”）.remove（）；
$（'content'）.load（url+'content'）.hide（）.fadeIn（'slow'）；
});
计数器=1；
$（'.buttons'）。在（'click'，函数（e）上{
如果（计数器<1 | |计数器>5）{返回false；}
var id=e.target.id；
如果（id==“next”&&counter<5）{counter++；
}如果（id==“previous”&&counter>1）{counter--；}
getImage（）；
});
getImage=function（）{
document.getElementById（“front”）.src=“Images/Images/Image”+counter+”.jpg”；
}
$（文档）.on（'click'，'littleImages'，函数（e）{
var imageSource=$（this.attr（'src'）；
$（“#容器”）.remove（）；
$（'#content'）.load（'index.html'+'#content'）.hide（）.fadeIn（'slow'）；
$（'#front'）.attr（'src'，imageSource）；
});
});

您正在尝试访问尚未加载到DOM中的元素。顾名思义，AJAX是“异步的”。因此，您试图在load（）完成之前在

前端

元素上设置源代码。使用完成回调修复此问题

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

$（'front'）.attr（'src'，imageSource）

需要是

$（'#front'）.attr（'src'，imageSource）谢谢。我已经纠正了打字错误，但仍然不起作用
$( '#content').load('index.html' + ' #content', function(){
  $( '#front' ).attr('src', imageSource);
}).hide().fadeIn('slow');