javascript - Jquery 在带有链接的两个图像之间切换

Question

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

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

参见 jsfiddle .

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

});​

这个函数工作正常。当用户在灯箱中的图像之间切换以及当他们关闭灯箱并打开一个新的时，会显示两个图像时会出现问题。 请在此处查看问题示例:jsfiddle .

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

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

非常感谢。

Answer 1

抱歉，我不同意目前得出的推论。我认为 prettyphoto 中有一个错误。当您显示/隐藏时，它会创建一个新容器并将代码复制到其中。在复制过程中，div 的 css display:none 属性丢失。

事实上，一直以来，当您认为您正在使用 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/