Javascript Jquery使用链接在两个图像之间切换

我有一个有五个链接的页面。每个链接都会打开一个灯箱（使用PrettyTo），其中包含两个图像（用户可以在这些图像之间切换）和一个段落

我有一个简单的Jquery脚本，可以在两个图像之间切换

看

此函数工作正常。当用户在灯箱中的图像之间切换时，以及当用户关闭灯箱并打开新的灯箱时，将显示两个图像，从而导致该问题请在此处查看问题示例：。

总之，我无法在页面上的灯箱之间切换，也无法正确使用此切换功能。我只能在一个灯箱中的两个图像之间切换，而无需刷新页面。

我的问题是如何修改这个Jquery函数，以便在用户打开和关闭页面上的不同灯箱时它可以工作？我是否可以使用一些重置，或者是否应该修改HTML结构？或者是否有其他切换图像的方法

---

非常感谢

我认为问题与此内联样式有关：尝试删除它

   <div id="thediv" style="display:none;">

---

对不起，我不同意目前得出的推论。我认为Pretto中有一个bug。显示/隐藏时，它将创建一个新容器并将代码复制到其中。在复制过程中，css显示：没有丢失div的任何属性

事实上，一直以来，当你认为你在处理2个元素（两个链接或两个div）时，你就是在处理4个元素。2个原始和2个克隆

一个简单的解决方法是仅使用克隆的：

$(document).ready(function() {
    $('a.button.unactive', "div.pp_content_container").live('click', function() {
        $('a.button', "div.pp_content_container").toggleClass('unactive');
        $('div.show', "div.pp_content_container").toggle('blind','',500);
        console.log('clicked');
    });
});​

---

看到它工作了吗：

您是否唯一地标识了每个lightbox？是的，我给每个保存lightbox内容的div指定了自己的唯一id。您的图像标记应该以：

“/>

而不是

”>

结尾。我想这可能是一个开始。但是，现在默认情况下显示所有lightbox内容，并且只有在用户单击链接时才需要隐藏和显示。请尝试给

#thediv

一个大边距：而不是

display:none

，它似乎可以解决问题，但现在页面有一个巨大的水平滚动。不管怎样，那是可以修正的？我最后做了一个姿势：绝对；左：-9999px；——这似乎奏效了。我只是希望它不会在我以后的开发中导致错误。

$(document).ready(function() {
    $('a.button.unactive', "div.pp_content_container").live('click', function() {
        $('a.button', "div.pp_content_container").toggleClass('unactive');
        $('div.show', "div.pp_content_container").toggle('blind','',500);
        console.log('clicked');
    });
});​