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

Question

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

有与隐藏/显示上面的主div相关的缩略图，所有这些都包含TwentyTwenty插件滑块。

问题是，当显示滑块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的设置部分，它说

然后，在这个容器上调用二十个()，一旦加载了图像：

我的猜测是，在对映像进行任何必要的操作(这会使div容器陷入混乱)之前，$(".twentytwenty").twentytwenty();会被调用；或者在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()来“刷新”主容器。