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

我有一个包含五个链接的页面。每个链接打开一个灯箱（使用prettyphoto）与两个图像（用户可以切换这些）和一个段落。jquery在两个带有链接的图像之间切换

我有一个简单的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结构？或者是否有另一种切换图像的方法？

非常感谢。

来源

2012-12-18 hellofavision

你有唯一标识，每个灯箱吗？ –

是的，我给每个div保存lightbox内容自己的唯一ID。 – hellofavision

您的图片标签应该以：'“/>'不''>' –

对不起，我不同意到目前为止所做的推论。我认为在prettyphoto中有一个错误。当你显示/隐藏时，它会创建一个新的容器并将代码复制到它。在复制期间，CSS显示：div的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-18 18:25:10 closure

谢谢你，先生。这是太棒了。 – hellofavision

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

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

来源

2012-12-18 17:39:48

我认为这可能是一个开始。但是，现在所有的灯箱内容都默认显示，并且需要隐藏并且只有在用户点击链接时才会显示。 – hellofavision

尝试给予'＃thediv'大幅度：http://jsfiddle.net/HU8zx/113/ 而不是'display：none' –

这似乎解决了问题，但现在页面有一个巨大的水平滚动。无论如何，可以修复？ – hellofavision

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

回答

相关问题