我正在使用这里找到的 Bootstrap-slider -https://github.com/seiyria/bootstrap-slider https://github.com/seiyria/bootstrap-slider目前正在使用 v10(虽然我也尝试过 v11,但结果相同)。这是我的代码:
/* 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:
<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 重新初始化时它会获取所有自定义元素和属性?