슬라이더 값을 동적으로 변경하십시오.

Question

저는 부트 스트랩 슬라이더를 사용하고 슬라이더 컨트롤을 3 개 그룹 (Easy, Medium, Hard)에서 동적으로 생성하고 있습니다. 나머지 두 슬라이더의 최대 값을 동적으로 변경하고 싶습니다. 한 그룹에있는 세 개의 슬라이더의 총 가치는 100을 초과하면 안됩니다. 모든 슬라이더가 같은 등급을 가지고 있기 때문에 어떤 것도 생각할 수 없습니다. 이 아이디어를 얻는 방법에 대한 아이디어.? 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()를 사용할 수

는 여기 jsfiddle 링크입니다.

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

같은 뭔가 당신은 아마 그래서 당신은 개별적으로 각 슬라이더를 대상으로 할 수 있지만, 용기 값에 추가 클래스를 추가 할 것입니다. containerTop 그런 식으로.