jQuery .show();函数不显示之前隐藏的所有元素

Question

有人可以帮我吗？我需要在 jQuery 的其余部分构建元素列表之前隐藏 .jshowoff-link 元素。然后我在最后展示相同的元素。

它生成链接内的图像列表。由于某种原因，它只显示第一个图像和链接，而不显示其他图像和链接。

我尝试交换 .show(); 函数的位置并将其添加到最后一个 if else 语句中，但这也不起作用。

这一切都是为了在 .jshowoff(); 函数触发之前停止显示图像和链接列表。

所以我完全没有主意了。有人可以帮忙吗？

// hide banners to begin with
$ ('.jshowoff-link').hide();

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');
    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $('#jshowoff').jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $('#jshowoff').jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $('.jshowoff-link').show();
    return false;
    }); 

Answer 1

问题是这样的：当 jshowoff 启动时，它会从 #jshowoff 容器中删除所有子元素并将它们放入变量中。然后它将它们一一添加到容器中。因此，当您尝试 show() 时，您的链接并不在 DOM 中。您可以做的是，在调用 jshowoff() 之前隐藏完整的 jshowoff 元素，然后在调用完成后再次显示它：

$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');

    var $container = $('#jshowoff');

    $container.hide();

    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $container.show();

    return false;
}); 

如果您仍然看到闪烁的元素，您可以还首先隐藏链接，创建容器，隐藏它，再次显示链接，然后添加 jshowoff 并再次显示容器，如下所示：

// hide banners to begin with
$ ('.jshowoff-link').hide();

$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');

    var $container = $('#jshowoff');

    $container.hide();

    // The links are still attached to the DOM at this point, but hidden inside the hidden container.
    $('.jshowoff-link').show();

    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $container.show();

    return false;
});