动态更改滑块值
问题描述:
我正在使用引导滑块并在一组三个(Easy,Medium,Hard)中动态地创建滑块控件。我想动态改变其余两个滑块的最大值。一组中所有三个滑块的总值不应超过100.我不能想到任何东西,因为所有滑块都具有相同的类别。任何想法如何实现这一点。?动态更改滑块值
这里是一个链接的jsfiddle:https://jsfiddle.net/sqj1djyv/1/
HTML:
<div class="container">
Container 1
<div class="container" style="padding:20px">
Easy:
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Medium:
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Hard:
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
</div>
<div class="container">
Container 2
<div class="container" style="padding:20px">
Easy:
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Medium:
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Hard:
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
</div>
JQuery的:
$("input.slider").slider({
tooltip:'always'
});
答
你可以使用:nth-child()
来定位正确的滑块。类似于
$('container:nth-child(2)').attr('name', dynamicNameValue);
您可能希望为容器值添加一个额外的类,尽管您可以分别定位每个滑块。 containerTop
类似的东西。
感谢您的回复。但是这不会解决问题 – johnny046
@ johnny046我明白了,我误解你在尝试更新滑块名称属性。你想更新哪些属性? '数据滑盖max'?这种方法不能用于该属性而不是名称,是否有任何理由? –
问题实际上我无法单独识别每个滑块。 – johnny046