[英]Destroy and re-initialize a bootstrap-slider
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).我正在使用此处找到的 Bootstrap-slider - https://github.com/seiyria/bootstrap-slider ,目前正在使用 v10(尽管我也尝试过 v11,但结果相同)。 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();
})
})
Basically I am trying to destroy and re-initialize a slider if it exists.基本上,我正在尝试销毁并重新初始化 slider(如果存在)。 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:虽然它是半有效的,但我注意到(例如)我的范围是 0-100,即使输入如下,它也只会达到 10:
<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';" />
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??我怎样才能使它在重新初始化 bs-slider 时接收到所有自定义元素和属性?
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.原来的解决方案是自己销毁它......我们所做的是克隆原始元素 - 获取它的值,删除元素,重新附加克隆,然后在 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();
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.