0

我正在使用引导滑块并在一组三个（简单，中，硬）中动态创建滑块控件。我想动态更改剩余两个滑块的最大值。一组中所有三个滑块的总值不应超过 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>

查询：

$("input.slider").slider({
    tooltip:'always'
});
4

1 回答 1

0

您可以使用:nth-child()来定位正确的滑块。就像是

$('container:nth-child(2)').attr('name', dynamicNameValue);

不过，您可能希望向容器值添加一个额外的类，以便您可以分别定位每个滑块。 containerTop类似的东西。

于 2016-12-30T17:46:43.027 回答