销毁并重新初始化引导滑块 [英] Destroy and re-initialize a bootstrap-slider

问题描述

我正在使用此处找到的Bootstrap滑块- https://github.com/seiyria/bootstrap -slider ，目前正在使用v10(尽管我也尝试过v11，但结果相同).这是我的代码:

I am using the Bootstrap-slider found here - https://github.com/seiyria/bootstrap-slider and currently am using v10 (although I've tried with v11 as well but the same result). This is my code:

/* For better styling - this uses Bootstrap slider */
$('.bs_sliders').each(function () {
    var id = '#' + $(this).attr('id');

    if (typeof window[id] !== 'undefined') {
        window[id].slider('destroy');
        delete window[id];
    }

    // .on will only work with an ID based selector not class
    window[id] = $(id).slider({
        formatter: function (value) {
            return value;
        },
    }).on('change', function (ev) {
        $(this).closest('li').find('.rangeUpdate').val($(this).val());

        $(this).closest('li').find('.continuing_eval').removeClass('continuing_eval');

        autoSave();
    })
})

基本上，我试图销毁并重新初始化滑块(如果存在).尽管它不起作用，但我注意到(例如)我的范围是0-100，即使输入如下，它也只能达到10:

Basically I am trying to destroy and re-initialize a slider if it exists. Whilst it semi-works I notice that (for example) where my range is 0-100 it only goes to 10 even though the input is as follows:

<input type="text" name="54_slider" value="22" class="bs_sliders elRes" id="54_slider" data-slider-id="54_slider"
    data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="22"
    data-slider-handle="custom"
    data-slider-rangeHighlights='[{"start":25,"end":26,"class":"grey_line"},{"start":50,"end":51,"class":"grey_line"},{"start":75,"end":76,"class":"grey_line"}]' />
<input type="text" value="22" class="rangeUpdate" data-toggle="popover" data-trigger="manual"
    data-content="The permitted value range is 0-100" style="--my-content:'Undefined';" />

此外，它也不选择自定义元素(例如分隔线).我怎样才能做到，当重新初始化bs-slider时，它将拾取所有自定义元素和属性?

Additionally, it doesn't pick up on the custom elements (such as the divider lines) either. How can I make it so that when a bs-slider is reinitialized it picks up on all the custom elements and attributes??

推荐答案

原来的解决方案是自己销毁它.我们要做的是克隆原始元素-抓取其值，删除该元素，然后重新连接克隆然后在滑块上设置该值.宁可大摇大摆，您可能会期望"destroy".做到这一点，但显然没有.

The solution it turns out is to destroy it yourself ... What we do is clone the original element - grab its value, remove the element, reattach the clone and then set the value on the slider. Rather longwinded and you'd expect "destroy" to do it but it clearly doesn't.

$('.bs_sliders').each(function(){
    var id = $(this).attr('id');

    // Detach and Reattach slider cloning the existing element
    if (typeof my_sliders[id] !== 'undefined'){
        delete my_sliders[id];

        var setVal = $(this).attr('value');

        // Parent of current element for new element
        var our_parent = $(this).parents('.slide_slidecontainers');

        // Rebuild the element
        var new_elem = $(this).clone();

        // Get rid of the actual input and rebuild it
        $(this).remove();

        $(our_parent).find('.slider').remove();

        $(our_parent).append($(new_elem));

        use_elem = $(new_elem);
    // Simply Attach using the existing element
    } else {
        use_elem = $(this);
    }

    my_sliders[id] = $(use_elem).slider();

    if (typeof setVal !== 'undefined'){
        my_sliders[id].slider('setValue',setVal);
    }

    my_sliders[id].on('change',function(ev){
        $(this).closest('li').find('.rangeUpdate').val($(this).val());

        $(this).closest('li').find('.continuing_eval').removeClass('continuing_eval');

        autoSave();
    })
})

这篇关于销毁并重新初始化引导滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！