範囲要素の親を設定する方法

Question

私は、複数の範囲要素を使って、母集団からクラスのパーセンテージを設定するゲームを少し作っています。

同様：

<input type="range" id="Miners_r" value="50" min="0" max="100" step="1" > 
<input type="range" id="Farmers_r" value="50" min="0" max="100" step="1" > 

どのように私は追加100％よりも高い値に他人を設定防ぐことができますか？ これを解決するためにjsまたはjQueryを使いたいと思います。この場合

Miner_r.value + Farmers_r.value >= 100

何かが明確でない場合は、私が原因私のsillynessに大きなより0

に他人を設定できないようにする必要があり、それについて私に質問してください！

ありがとうございます！

Answer 1

非常に簡単です。あなたが探しているロジックは次のとおりです。

1. 範囲要素
2. のいずれかの値の変化を聴く合計は他の兄弟を設定する100
3. あるように、他の兄弟のための許容値を計算しますこの値に

私のコードでは、複数の兄弟が関係するユースケースがあると仮定しました。その場合、残りの値は他のすべての兄弟の間で均等に分散されます。あなたのケースでもうまくいくはずです。

p/s：すべての入力には、単に選択するだけで.range-groupという一般的なクラスを指定しました。

$(function() { 
 
    $('.range-group').on('change', function() { 
 
    var $t = $(this), 
 
     $s = $(this).siblings('.range-group'); 
 
    
 
    // Cap siblings values to 100 minus the current value. 
 
    // The remainder of the values will be distribueted evenly among 
 
    // all other siblings. 
 
    $s.val((100 - $t.val())/$s.length); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" class="range-group" id="Miners_r" value="50" min="0" max="100" step="1" > 
 
<input type="range" class="range-group" id="Farmers_r" value="50" min="0" max="100" step="1" >