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

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

上面有一些与隐藏/显示主要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);

最佳答案

我进行了一些测试，设法找到了可能导致解决方案的模式。
看来您的函数showSlide很好。但是，我怀疑对$(".twentytwenty").twentytwenty();的调用可能会导致异常行为。

通过阅读http://zurb.com/playground/twentytwenty的“设置”部分，它表示



我的猜测是，在某种程度上，对图像进行任何所需的操作之前，$(".twentytwenty").twentytwenty();会被称为，这会弄乱div容器)；或者在div的隐藏和显示(通过运行showSlide)发生后甚至根本没有被调用。

我怀疑这是真的，因为进行了测试。我已经加载了网址，并看到主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()来“刷新”主容器。

关于javascript - 尝试使用多个TwentyTwenty实例，但有些实例返回的高度为0，但未显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29129548/