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

我认为该问题与此内联样式有关：请尝试将其删除。

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

Answer 2

对不起，我不同意迄今为止所做的推论。我认为prettyphoto有一个错误。当您显示/隐藏时，它会创建一个新容器并将代码复制到该容器中。在复制期间，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/

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

2 个答案: