Question

我一直在阅读stackoverflow大部分时间，因为我正在构建一个图像库，我希望通过鼠标单击一个位于缩略图上方的较大div来设置嵌套的缩略图div控件。我想使用jQuery而不是iFrames，但我被卡住了。目前我有以下脚本

$(document).ready(function(){
$('#div_2').hide();

$("#mybutton1").click(function(){
$("#div_1").fadeOut(1000, function(){
$("#div_2").fadeIn(1000);
  });
});
$("#mybutton2").click(function(){
$("#div_2").fadeOut(1000, function(){
$("#div_1").fadeIn(1000);
    });
  });
});

我向前迈进的挑战是，我希望点击任何缩略图，将该图像的较大版本加载到预览区域。如果我有10个缩略图，我不能让每个缩略图淡出所有可能存在的其他缩略图，而是我想连接代码，这样无论什么图像都会淡出，点击的缩略图的更大版本将会淡出。

我想过将缩略图链接到较大的预览图像，然后使用以下功能禁用标准链接行为：

$('.gallery_thumbnails a').click(function(e) {
e.preventDefault();
});

然后我想我可以加入以下内容，但我不确定如何完全实现它：

$('.gallery_preview').html('<a style="background-image:url('+photo_preview+');"></a>');

向我提出类似问题的其中一个主题我觉得很有意思，但我无法完全理解它是如何运作的：https://stackoverflow.com/a/3420033/1422589

另外，不使用.hide，如何动态加载不在页面上的div？

很多问题，我知道 - 非常感谢任何帮助！

Answer 1

$('.gallery_thumbnails a').click(function(e){
    e.preventDefault();
    var bigImageLink = $(this).attr("href");
    $("#div_1").fadeOut(1000, function(){
        $(this).find("img").attr("src", bigImageLink).fadeIn(1000); 
    });
});

确保缩略图链接中的href具有指向大图片版本的直接链接，#div_1内部只有一个img标记。

jQuery：如何通过单击一组其他div来控制一个div的内容

1 个答案: