1

我有一个包含五个链接的页面。每个链接都会打开一个灯箱（使用 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 结构？还是有另一种切换图像的方法？

非常感谢。

4

2 回答 2

1

我认为这个问题与这种内联样式有关：尝试删除它。

   <div id="thediv" style="display:none;">
于 2012-12-18T17:39:48.093 回答
1

抱歉，我不同意到目前为止得出的推论。我认为漂亮照片中有一个错误。当您显示/隐藏时，它会创建一个新容器并将代码复制到其中。在复制过程中，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/

于 2012-12-18T18:25:10.487 回答