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

Trying to use multiple TwentyTwenty instances, but some are returning height as 0, and not displaying

本文关键字：实例 返回 高度 显示 Twenty20      更新时间：2023-09-26

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

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

问题是，当滑块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").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()都会被调用来"刷新"主容器。

相关文章：