在AJAX调用之间销毁/重新加载bxSlider？

Question

我的初始页面有一个bxSlider（全角布局）和一个围绕此元素的包装。

然而，当我点击通过ajax转到另一个页面时，我有一个javascript动作将重新加载滑块包装器内容，因为我从＆＃34; 1滑块全宽布局＆＃34; 到＆＃34; 2个半宽布局的滑块＆＃34;

因此总共有3个滑块，但如果直接加载起始页，则只看到1.如果直接加载另一页（没有ajax），则会看到其他2个滑块。

我像这样初始化滑块：

banner1 = $('#page_banner1').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

banner2 = $('#page_banner2').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 9500,
    auto: true
});

banner_full = $('#page_banner_full').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 1080,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

例如，在其中一个页面（不是开始页面）上， banner1 和 banner2 是bxSliders，但 banner_full 返回NULL：

<div id="banner_wrapper" class="page_block">

    <div id="page_banner1" class="page_slider" style="display: none;">
        <div id="banner1_0">
            <img id="img_0" src="cats.png" border="0">
        </div>
        <div id="banner1_1">
            <img id="img_1" src="dogs.png" border="0">
        </div>
        <div id="banner1_2">
            <img id="img_2" src="fish.png" border="0">
        </div>
    </div>

    <div id="page_banner2" class="page_slider" style="display: none;">
        <div id="banner2_0">
            <img id="img_0" src="banana.png" border="0">
        </div>
        <div id="banner2_1">
            <img id="img_1" src="orange.png" border="0">
        </div>
        <div id="banner2_2">
            <img id="img_2" src="apple.png" border="0">
        </div>
    </div>

</div>

我想我需要将初始化代码分支到函数中？但不确定最好的方法来重新创建一个我可以轻松调用的函数（我会检查typeof滑块！==＆＃39; undefined＆＃39;然后重新加载/破坏else运行初始化代码）。< / p>

我知道bxSlider支持加载动态内容......除了我实际更改完整内容 $（＆＃39;＃banner_wrapper＆＃39;）。html（数据）; 因为我使用滑块的不同选项（宽度等）。

这里是完整滑块的HTML：

<div id="banner_wrapper" class="page_block">

    <div id="page_banner_full" class="page_slider" style="display: none;">
        <div id="banner_full_0">
            <img id="img_0" src="football.png" border="0">
        </div>
        <div id="banner_full_1">
            <img id="img_1" src="rugby.png" border="0">
        </div>
        <div id="banner_full_2">
            <img id="img_2" src="basketball.png" border="0">
        </div>
    </div>

</div>

编辑：

好的，这就是我将初始化bxSlider代码分支到函数中所做的工作：

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

适用于：

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};

但是我还没有能够立刻摧毁滑块＆＃39;？它似乎等到bxSlider在破坏并加载另一个之前先完成？

我想我应该使用＆＃39;这个＆＃39;而不是＆＃39;产品＆＃39;在原型功能中，但我不认为这是事情不能正常工作的真正原因吗？ - ＆GT;嗯这似乎不起作用 - ＆＃39;这个＆＃39;未定义

有什么想法吗？现在，开始页面上的滑块工作，然后我点击并加载另一个页面，DOM显示两个滑块，它们似乎已初始化为bxSliders但它们尚未启动且它们不会显示为可见？

啊，所以我确实要修理我的产品＆＃39; var呼叫＆＃39;这个＆＃39;原型内部。代码更新，现在运作良好......

Answer 1

我在编辑中修复了我的代码，但是这里是它的副本：

我创建了一个初始化滑块的功能，另一个用于尝试销毁滑块，另一个用于重新加载滑块。然后在我的JS函数中，我只是销毁，初始化，重新加载以确保它全部正常工作...这可能比我现在的重构更多但是它似乎对我很有用：< / p>

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

适用于：

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};