更改AJAX加載內容的元素

我有關於使用Ajax傳遞信息的問題。我有一個項目，其中包含一個主頁，其中有各個部分。每個部分使用ajax加載。主頁有一個圖片庫，可以使用加號和減號箭頭進行瀏覽。 gallery.html頁面包含更小尺寸的所有圖片。爲了節省時間，我不在這裏重現CSS。如果你看一下eh js文件，你會發現對於主頁來說，有一個簡單的函數可以改變圖像的來源以便瀏覽。更改AJAX加載內容的元素

我想要做的是，在圖庫頁面上，當您單擊圖像時，不僅加載主頁，而且加載了您點擊的圖片。

我的功能

$(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); 
}); 
    });

來源

2017-04-25 Paul

'$（ '前'）.attr（ 'SRC'，ImageSource的）;'需要是'$（ '#front'）.attr（ 'SRC'，ImageSource的）;' –

感謝。我已更正了錯字，但仍無法正常工作 – Paul

您試圖訪問未裝入DOM又一個元素。顧名思義，AJAX就是「異步」的。因此，您正試圖在load（）完成之前在您的front元素上設置源。使用完成回調來解決這個問題。

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

來源

2017-04-25 23:09:48 TheValyreanGroup

更改AJAX加載內容的元素

回答

相關問題