Question

我有一个包含6个图像的图库，我使用Javascript来控制。单击图像时，它会淡出并加载新图像。缩略图位于“图库”div中，主图像显示在空的“照片”div中。

我无法弄清楚如何使用相应的图像加载段落。例如，我想加载一个图像，但也有一段特定于该图像的文本，加载它。

这是否必须使用数组？我需要一些想法。这是Javascript和html。

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

<div id="photo">
</div>

<div id="gallery">
<a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a>
<a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a>
<a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a>
<a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a>
<a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a>
<a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a>
</div>

我想指出一切正常。我只是迷失在哪里开始，以便加载不同的段落与单击时加载的正确图像。如果感兴趣，这是现场网站：

Live site that you can view what is working already

Answer 1

你可以在一个带有display：none风格的锚标签内放一个段落，如下所示：

<div id="gallery">
<a href="images/home1_h.jpg">
<img src="images/home1.jpg" alt="home 1">
<p style="display:none">this is a paragraph</p></a>
</div>

并在您的脚本中获取段落内容并将其与图像一起显示

var paragraph=$(this).find("p:first").text();

你的html中的

为你的段落添加一个div：

<div id="photo"></div>
<div id="paragraph"></div>

在你的javascript中你应该填写这个div：

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
var paragraph=$(this).find("p:first").text();
newImage.hide();
$('#photo').prepend(newImage);
$('#paragraph').html(paragraph);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

Javascript对应字幕处理

1 个答案: