具有链接的两个图像之间的Jquery切换

Question

我有一个有五个链接的页面。每个链接打开一个有两个图像(用户可以在这些图像之间切换)和一个段落的lightbox (使用漂亮的伤寒)。

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

见小提琴。

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

});​

这个函数工作正常。当用户在lightbox中的图像之间切换时，当用户关闭lightbox并打开一个新的图片时，就会出现问题。请在这里看到一个问题的例子：小提琴.

总之，不能在页面上的灯箱之间切换，并且具有正确的切换功能。我只能在一个灯箱中的两个图像之间切换，而不必刷新页面。

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

非常感谢。

Answer 1

对不起，我不同意到目前为止得出的推论。我想“漂亮的伤寒”里有个虫子。当您显示/隐藏时，它将创建一个新容器并将代码复制到它。复制期间，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');
    });
});​

看到它的作用：http://jsfiddle.net/HU8zx/114/

Answer 2

我认为这个问题与这种内联风格有关:尝试删除它。

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