Question

我正在尝试在我的网页上放置照片视图/幻灯片，但我没有得到我想要的结果。我创建了一个小提琴HERE来向您展示我想要做的事情。我想要它做的是当你点击一个缩略图时，它将缩略图切换到主照片点，主照片切换到缩略图点。它首先工作，但在您开始单击其他缩略图后，它开始不将正确的照片切换到主插槽。此外，如果您重新点击缩略图，您只需单击它什么都不做。这是我的jquery代码，但看看我的小提琴，你就能看到我想要做的事情。

$('.thumb1').click(function() {
    $('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});

$('.thumb2').click(function() {
    $('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});

$('.thumb3').click(function() {
    $('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});

$('.thumb4').click(function() {
    $('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});

Answer 1

我正在查看你的代码，我不建议在这样的元素之间切换类，因为它可能会抛出像你这样的几个bug。我玩了你的代码并简化了一点：

$('.thumb').click(function () {
    var previousSrc = $('.main').children().attr('src');
    $('.main').children().attr('src', $(this).children().attr('src'));
    $(this).children().attr('src', previousSrc);
});

这是更新的小提琴：http://jsfiddle.net/RfKh4/5/

基本上我所做的是保存previousSrc中.main div图像的先前src属性，然后将div的图像更改为缩略图中的图像。最后将缩略图的图像更改为.main div上的图像。希望它能帮到你！

Answer 2

我改变了你的类，类似于Joao的方式，但我的JavaScript有点不同

$('.thumb').click(function () {
    var newHTML = this.innerHTML;
    this.innerHTML = $('.main')[0].innerHTML
    $('.main').html(newHTML);
});

您不仅要更改src，还会保留图片的所有其他属性，例如alt属性，您应该将这些属性添加到图片中以便于访问。

我没有实现不点击同一个人什么都不做的想法，因为如果他们想看看他们刚才看到的图像他们就不能。

JSFiddle：http://jsfiddle.net/howderek/RfKh4/6/

通过点击带有jquery的缩略图来切换照片位置

2 个答案: