javascript - 尝试使用多个 TwentyTwenty 实例，但有些返回高度为 0，并且不显示

Question

我不知道发生了什么，也不知道什么时候发生了变化......但这是一个真正的问题。

上面有一些与隐藏/显示主 div 相关的缩略图，它们都包含 TwentyTwenty 插件 slider 。

问题在于，当显示 slider div 以及将它们的高度设置为 0 时，根本没有逻辑。加载它们时，有些会显示，有些不会，并且在调整窗口大小时，通常会显示当前隐藏的那个，但其他的都不显示。

有没有了解 javascript 的人可以帮助我？这就是我用作 JS 脚本的内容

function showSlide(slideNumber)
{  
    $(".image-compare-set").hide();
    $('.image-compare-set[data-image-num="' + slideNumber + '"]').show();
}

$(".twentytwenty").twentytwenty();
$(".image-compare-nav img").click(function() {
    showSlide( $(this).attr('data-image-num') );
});

showSlide(1);

Answer 1

我已经进行了一些测试，并设法找到了可能导致解决方案的模式。您的函数 showSlide 似乎没问题。但是，我怀疑对 $(".twentytwenty").twentytwenty(); 的调用可能导致了奇怪的行为。

通过阅读 http://zurb.com/playground/twentytwenty 上的设置部分, 它说

Then call twentytwenty() on this container once the images have loaded:

我的猜测是，不知何故，$(".twentytwenty").twentytwenty(); 被调用之前 任何需要的图像操作完成(这将弄乱 div 容器)；或者它甚至在 div 的隐藏和显示(通过运行 showSlide)发生后根本没有被调用。

我怀疑这是真的，因为有测试。我已经加载了 url 并看到主 div 没有显示(好像它实际上是隐藏的)。然后，在控制台中，我输入了 jQuery(".twentytwenty").twentytwenty()，很快，主容器就正常显示了。每次点击新拇指时，都会重复相同的行为。

考虑到如果不访问代码并对其进行测试就很难指出可能的原因，我会在这里做出一个大胆的猜测:尝试将您的函数 showSlide 设置为

function showSlide(slideNumber)
{  
    $(".image-compare-set").hide();
    $('.image-compare-set[data-image-num="' + slideNumber + '"]').show();
    $(".twentytwenty").twentytwenty(); //line added
}

确保每次您通过单击拇指更改幻灯片时调用 twentytwenty() 以“刷新”主容器。