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

Question

我的起始页有一个 bxSlider(全角布局)和一个围绕该元素的包装器。

但是，当我通过 ajax 单击进入另一个页面时，我有一个 javascript 操作，该操作将重新加载 slider 包装内容，因为我从 “1 个 slider 全角布局” 更改为 >“2个半角布局的 slider ”

因此总共有 3 个 slider ，但如果直接加载起始页，您只会看到 1 个。如果直接加载另一个页面(不使用 ajax)，您会看到另外 2 个 slider 。

我像这样初始化 slider :

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 是 bxSlider，但 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 slider !== 'undefined' ，然后重新加载/销毁，否则运行初始化代码)。

我知道 bxSlider 支持加载动态内容...但我实际上正在更改完整内容 $('#banner_wrapper').html(data); 因为我对 slider (宽度等)。

以下是完整 slider 的 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');
};

但我无法“立即”销毁 slider ？看起来它会等到 bxSlider 首先完成后再销毁它并加载另一个？

我想我应该在原型(prototype)函数中使用“this”而不是“product”，但我不认为这是事情无法正常工作的真正原因？ -> 嗯，这似乎不起作用 - 'this' 未定义

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

啊，所以我确实必须修复原型(prototype)中对“this”的“产品”var 调用。代码已更新并且现在运行良好...

Answer 1

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

我创建了一个函数来初始化 slider ，另一个函数用于尝试销毁 slider ，另一个函数用于重新加载 slider 。然后在我的 JS 函数中，我只是销毁、初始化、重新加载以确保它全部正常工作...这可能比我现在拥有的要重构得多，但它似乎对我来说效果很好:

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