通过单击缩略图交换 Jquery 图像和标题答案

【问题标题】：Jquery image and caption swap by clicking thumbnails通过单击缩略图交换 Jquery 图像和标题
【发布时间】：2013-01-23 20:42:55
【问题描述】：

我正在尝试创建一个简单的 jquery 图片库，其中单击缩略图按钮（每张图片 1 个）通过淡入淡出交换图像并交换文本标题。

我的 div 包含绝对位于另一个之上的图像，以及旁边的标题，下方带有缩略图/按钮。

我写的 jquery 可以工作——除了页面加载时的第一次转换。第一个过渡使目标图像出现，然后淡出，然后淡入。它应该只是淡入。

我是 jquery 的新手，如果这是糟糕的代码，我深表歉意......

谁能告诉我为什么第一个转换不能正常工作？

谢谢

查询：

$(document).ready(function(){
    $('.gallery_button').click(function(){
     $('.gallery_slide').animate( {opacity:0.0}, 2000 );
     $('#slide'+$(this).attr('id')).toggleClass('visible');
     $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );
     $('.gallery_caption').hide();
         $('#caption'+$(this).attr('id')).show();
         $('#caption'+$(this).attr('id')).toggleClass('visible');
    });
});

HTML：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2"/>Caption2</div>
<div class="gallery_caption hidden" id="caption3"/>Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="2"/></div>
<div class="gallery_button"><img src="button.gif" id="3"/></div>
</div>

CSS：

#gallery_slider{position:relative; height:500px;}
.gallery_slide{position:absolute; top:0; left:0; width:640px; height:480px;}
.gallery_caption{position:absolute; bottom:20px; left:660px; width:160px; min-height:150px;}
.gallery_button{width:10px; height:10px; margin:490px 8px 0 0; float:left;}

.hidden{display:none;}
.visible{display:block; visibility:visible;}

【问题讨论】：

id="1"。 ID 不能以数字开头，并且必须是唯一的。
这是上面代码的一个小技巧：jsfiddle.net/znsS5 并且我修复了相同的按钮 ID...当您单击时它似乎工作正常，但也许我错过了什么？
谢谢你——我的错误，id 实际上在实际代码中是唯一的。 @j08691 我相信 HTML5 现在允许 id 以数字开头
是的。但是为了兼容性，我建议避免以数字开头的 ID。

标签： jquery jquery-animate show-hide

【解决方案1】：

这正是这段代码告诉它要做的事情：

 $('#slide'+$(this).attr('id')).toggleClass('visible'); // shows it
 $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );  // fades it in

试试这个：

$(document).ready(function () {
  $('.gallery_button img').click(function () {
    var id = this.id;
    $('.gallery_caption').hide();
    $('.gallery_slide').fadeOut(2000, function () {
      $('#caption' + id).show();
      $('#slide' + id).fadeIn(2000);
    });
  });
});

http://jsfiddle.net/mblase75/Utb8f/

【讨论】：

非常感谢 - 这是正确的并解决了问题，虽然现在原始图像/div 淡出，然后目标图像/div 出现没有淡入。有没有办法让它淡入在？
更新了答案。使用fadeToggle 应该是最快的解决方法。
感谢@blazemonger 提供帮助，但效果不佳 - 当按 1 - 2 - 3 的顺序单击按钮时，它使淡入淡出工作，但在后退时，即在 3 上单击 2，图像不会淡出，尽管标题会交换
现在可以完美运行了，谢谢 - 除了...在淡出和淡入完成后，新幻灯片再次淡入和淡出它没有意义！

【解决方案2】：

我无法发表评论，但我想指出您的 HTML 可以做一些评论。

底部的按钮是嵌套的，因为 div 似乎没有 end 。此外，您的其他一些 div 的格式为

<div />something</div>

而不是

<div>something</div>

这是您的代码的清理版本：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2">Caption2</div>
<div class="gallery_caption hidden" id="caption3">Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
</div>

此外，如果您想查看一些现有的东西（如果您愿意，最好使用已经存在并且已经过大量人测试的东西）或者只是想了解其他人的情况以前做过这个，我已经通过并找到了一些我认为可以实现您想要实现的流行插件：

希望对您有所帮助。

编辑：

我已经完成并编写了一个小代码 sn-p（用猫来幽默）来举例说明如何在不使用 ID 的情况下做到这一点，因此您可以添加新元素并交换它们而不必担心ID。

http://jsfiddle.net/Q6agB/1/（第二次编辑后） http://jsfiddle.net/Q6agB/3/（第三次编辑，使用 cmets）

最好将相互关联的元素（例如带有标题的图像）放在一起，这样您就可以轻松地四处移动它们，并且当有人瞥了一眼您的东西时（在您忘记所有关于代码），他们可以很容易地告诉你一直在做什么。所以这就是我将标题与图像分组的原因。

这就是你想要达到的目标吗？

【讨论】：

谢谢，我现在已经编辑了原始帖子 - 匆忙从工作示例中复制和粘贴会导致丢失关闭的 div。感谢您的链接 - 我会检查这些。作为 jquery 的第一次尝试，想尝试从头开始做 - 但也会看看这些人是如何做到的
P.S.：您看到了两次相同的猫图像。这是工作。 :)
谢谢你的 jsfiddle——虽然不是我想要的——每个按钮都需要显示一个相应的图像，如这里的示例所示，您可以再次单击该按钮并使用不同的图像出现
对不起。我从内存中编写了 jQuery.inArray() 函数，因此是错误的。 jsfiddle.net/Q6agB/1
现在效果很好:) 谢谢。我不太确定所有 jquery 的含义，所以我正在努力解决它。再次感谢

【解决方案3】：

我很想弄清楚如何使用原始格式对原始问题进行排序，因为这是我的第一段 jquery，所以我终于设法让它工作：

$(document).ready(function(){
$('.gallery_button').click(function(){
    var id = this.id;
    $('.gallery_caption:visible').hide();
    $('.gallery_slide:visible').fadeOut(500, function(){
        $('#slide' + id).fadeIn(5000);
        $('#caption' + id).show();
    });
    });
});

感谢大家的意见和帮助

【讨论】：