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;
});