1
使用jQuery，我有一個幻燈片，我顯示每個幻燈片的名稱與一個類標題的div。我希望div內的文本（取自圖像的替代文本）發生變化 - 因此我需要刪除以前的文本 - 現在每個圖像中的文本都會彈出到列表中，並繼續隨着每個圖像的點擊。我希望第一個文本在下一個圖像文本彈出時消失 - 我嘗試使用remove（），但似乎無法使其正常工作。jquery幻燈片ALT文本
的HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Gallery</title>
<meta charset='utf-8'>
<link href="css/styles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/project7.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>jQuery-based Gallery</h1>
<div id="gallery">
<ul id="thumbs">
<li><a href="images/andytimmons.jpg"><img src="images/thumbs/andytimmons.jpg" alt="Andy Timmons plays Sgt. Pepper"></a>
</li>
<li><a href="images/ericgales.jpg"><img src="images/thumbs/ericgales.jpg" alt="Eric Gales - Relentless"></a>
</li>
<li><a href="images/jellyfish.jpg"><img src="images/thumbs/jellyfish.jpg" alt="Jelly Fish - Spilt Milk"></a>
</li>
<li><a href="images/kingsx.jpg"><img src="images/thumbs/kingsx.jpg" alt="King's X"></a>
</li>
</ul>
</div>
</body>
</html>
的CSS：
/* style the thumbnails */
#thumbs {
list-style: none;
padding: 0 0 20px;
margin: 0 0 20px;
border-bottom: 2px solid #333;
}
#thumbs li {
display: inline;
margin: 0 5px;
}
#thumbs li a img {
border: 1px dashed #000;
padding: 1px;
background: #fff;
opacity: .6;
}
#thumbs li a img:hover {
opacity: 1;
}
/* style the big main image and caption */
.galleryBig {
border: 4px solid #333;
padding: 2px;
background: #666;
}
.caption {
font: bold 18px georgia, times, serif;
background: rgba(255, 255, 255, .7);
position: relative;
top: -3em;
padding: 5px;
}
jQuery的：
$('document').ready(function(){
loadImages();
displayFirst();
gallery();
});
function loadImages(){
var galleryImages = [];
var loadThese = $('#thumbs a');
for(i=0; i<loadThese.length; i++){
galleryImages[i] = new Image();
galleryImages[i].src = loadThese[i];
}
} // end loadImages
function displayFirst(){
var firstImagePath = $('#thumbs a').attr('href');
var firstImage = $('<img class="galleryBig" src="' + firstImagePath + '">');
$('#thumbs').after(firstImage);
var firstAltText = $('#thumbs img').attr('alt');
$('.galleryBig').after('<div class="caption">' + firstAltText + '</div>');
}
// end displayFirst
function gallery(){
$('#gallery a').click(function(evt){
evt.preventDefault();
$(".caption").hide();
var alt = $(this).children("img").attr("alt");
oldImage = $('#thumbs').next();
var imgPath = $(this).attr('href');
var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
var altText = $('.galleryBig').after('<div class="caption">' + alt + '</div>');
newImage.hide();
$('#thumbs').after(newImage);
newImage.fadeIn();
oldImage.remove();
}); //end anonymous fcn
} //end gallery
請在此處發佈您的代碼，以便人們可以更好地幫助您！ – pna
你試過做element.html（textvar） – w3bMak3r
不 - 我沒有試過element.html（textvar）。我不知道該怎麼做。我對jquery很陌生，正在學習。如果你能告訴我應該怎麼做，我會很感激。謝謝。 –