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

我试图创建一个简单的jquery图像库，在这里单击一个缩略图按钮（每个图像1个）通过淡入淡出的方式交换图像，并交换文本标题

我有一个div，其中包含绝对位于另一个之上的图像，旁边有一个标题，下面有缩略图/按钮

我编写的jquery除了在加载页面时的第一次转换之外都很有用。第一次过渡使目标图像出现，然后淡出，然后淡入。它应该只是淡入淡出

我是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:

---

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

 $('#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);
    });
  });
});

---

我不能发表评论，但我想指出的是，您的HTML只需稍加审阅即可

底部的按钮是嵌套的，因为div似乎没有结尾。另外，您的一些其他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>

标题1
标题2
标题3

另外，如果你想看看一些现有的东西（如果你愿意的话，使用一些已经被很多人测试过的东西总是很好的），或者只是想了解其他人以前是如何做到这一点的，我已经浏览并找到了一些流行的插件，我认为它们实现了你想要实现的目标：

希望有帮助

编辑：

我已经阅读并制作了一个小代码片段（用猫逗我），以举例说明如何在不使用ID的情况下实现这一点，这样您就可以添加新元素并交换它们，而不必担心ID

（第二次编辑后） （第三次编辑，带注释）

最好将相关的元素（比如带有标题的图像）放在一起，这样你可以轻松地移动它们，当有人看你的东西时（可能是你，在你忘记了所有代码之后），他们可以轻松地告诉你在做什么。这就是为什么我把标题和图片组合在一起

---

这就是您试图实现的目标吗？

我很想知道如何使用原始格式对原始问题进行排序，因为这是我的第一个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();
    });
    });
});

---

感谢所有人的输入和帮助

id=“1”

。ID不能以数字开头，必须是唯一的。下面是上面代码的修改：我修复了相同的按钮ID。。。当你点击的时候它似乎在工作，但也许我遗漏了什么？谢谢你-我犯了这个错误，id在实际代码中是唯一的@j08691我相信HTML5现在允许id以数字开始是的，他们是这样做的。但是为了兼容性，我建议避免使用数字启动ID。非常感谢-这就解决了问题，虽然现在原始图像/div淡出，但目标图像/div显示时没有淡入。有没有办法让它淡入？更新答案。使用

fadeToggle

应该是最快的修复方法。感谢@blazemonger的帮助，但效果不太好-当按顺序1-2-3单击按钮时，它可以使淡入淡出效果，但当按顺序1-2-3单击按钮时，即在3上单击2时，图像不会淡出，尽管标题现在效果很好，谢谢-除了。。。淡出淡入完成后，新幻灯片会再次淡入淡出，这毫无意义！谢谢，我现在已经编辑了原来的文章-从工作示例中快速复制和粘贴会导致缺少结束div。谢谢你的链接-我会查出来的。想在jquery上从头开始尝试，但会看到这些家伙是如何做到的。S：你看到了两次相同的猫的图像。它正在工作。：）谢谢你的JSFIDLE——虽然不是我想要的——每个按钮都需要显示一个对应的图像，在这里的示例中，你可以再次单击按钮，并显示一个不同的图像。我从内存中编写了jQuery.inArray（）函数，因此是错误的。好了，谢谢你。我还不太清楚jquery的全部含义，所以我正在努力研究它。再次感谢

<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>

$(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();
    });
    });
});