我有一个jsfiddle。
https://jsfiddle.net/nacs2025/44mxnzbu/
这是一个输入标签:
<div class="marging">
<input id="ex19" type="text" data-provide="slider"
data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
</div>
<br/>
<br/>
<button id="myButton">
OKAY
</button>
当我单击按钮时,我想添加以下属性并更新已经存在的两个属性:
'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"
我有这个部分工作的javascript。
var spanishLabels = ["Enero", "Febrero", "Marzo"];
var num = [1,2,3];
$('#myButton').click(function() {
$('.data-slider-ticks-labels').each(function(index) {
$(this).text(spanishLabels[index]);
});
$('.data-slider-ticks').each(function(index) {
$(this).text(num[index]);
});
$( "#ex19" ).attr({
'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"
});
});
我做错了什么,因为 JS 不适合我。
我正在详细查看 Bootstrap Slider的文档
setAttribute()
,并找到了允许(理论上)更改滑块参数的方法,以及方法refresh()
以及relayout()
以某种方式重绘滑块的方法,但是它不适用于我(请参阅下面示例中的滑块 2)。我彻底查看了在Github上找到的 Bootstrap 滑块代码,在分析和测试之后,我注意到 ticks 和 ticks_labels 以及工具提示仅在创建滑块时生成,并且不会被刷新或重新布局方法修改。
换句话说,我发现修改 ticks 和 ticks_labels 的唯一方法是销毁并重新创建滑块,这对我来说似乎不合逻辑(或者有些东西我不明白)。