動態更改滑塊值

Question

我正在使用引導滑塊並在一組三個（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' 
}); 

Answer 1

你可以使用:nth-child()來定位正確的滑塊。類似於

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

您可能希望爲容器值添加一個額外的類，儘管您可以分別定位每個滑塊。 containerTop類似的東西。