5

最大値は異なりますが、同じ容量を共有する 3 つの input type='range' フィールドがあります。この容量は、3 つの入力のいずれかが変化するたびに減少します。容量が0に達すると、入力フィールドが右に移動するのを防ぎ(値が増加するのを防ぎ)、左に移動するだけになるはずですが、JSとjQueryを使用してそれを行う方法がわかりません

ここに入力用のhtmlがあります

<input type="range" class="slider" id="woodSlider" min="0" value="0" max="1558">
<input type="range" class="slider" id="ironSlider" min="0" value="0" max="2555">
<input type="range" class="slider" id="stoneSlider" min="0" value="0" max="2451">

容量を減らすコードは次のとおりです。

$("input").change(function() {  
    $("#capacityLeft").html(parseInt(holding.capacity) - 
         $("#woodSlider").val() -
         $("#ironSlider").val() -
         $("#stoneSlider").val());
    if(parseInt($("#capacityLeft").html()) <= 0) {
    // TODO: FIND OUT HOW TO STOP THE SLIDERS FROM MOVING
    }
});
4

2 に答える 2

10

event.preventDefault()さて、イベントを停止するために使用できます。onchangeこれらの範囲スライダーの関数またはoninputイベントをバインドして合計を計算し、最大値を超えているかどうかを確認し、超えている場合はイベントを停止する必要があります。

これは純粋な JS ソリューション(フィドル リンク) で、jQuery で簡単に書き直すことができます。

var maxTotal = 150, // define the max sum of values
    inputs = [].slice.call(document.getElementsByTagName('input')), // refrence to the elements
    getTotal = function(){ // helper function to calculate the sum
        var sum = 0;
        inputs.forEach( function(input){
           sum += parseInt(input.value, 10); 
        });
        return sum;
    },
    maxReached = function(e){  // check if the max is reached
        var sum = getTotal(), target;
        if(sum > maxTotal){
            target = e.target;
            // set the max possible value if the user, for example, clicks too far to the right
            target.value = target.value - (sum - maxTotal);
            // next line is just for demonstrational purposes
            document.getElementById('total').innerHTML = getTotal();

            // prevent increasing the value
            e.preventDefault();
            return false;
        }
        // next line is just for demonstrational purposes
        document.getElementById('total').innerHTML = getTotal();

        // everything's fine, nothing to do.
        return true;
    };

// attach the maxReached function to your inputs
inputs.forEach( function(input){
    input.addEventListener('input', maxReached );
});
于 2013-09-30T09:15:45.427 に答える