0

私は、スライダーと呼ぶ 3 つの html5 input="range" 項目を含む次の html を持っています。HTML には、各スライダーの値を表示するための span タグもあります。各 span タグにはパーセンテージが表示され、3 つすべての合計が 100% になります。

HTML:

<div class="container">
    <input type="range" class="slider" id="r1" value="70" /><span id="s1"></span><br />
    <input type="range" class="slider" id="r2" value="20" /><span id="s2"></span><br />
    <input type="range" class="slider" id="r3" value="10" /><span id="s3"></span><br />
    <input type="hidden" class="placeholder" />
</div>

いずれかのスライダーが変更されているため、変更されていない2つのスライダーを更新するために使用している次のjqueryコードを作成しました。このコードは、span タグのすべての値を同期させ、スライダーが変更されていない 2 つを調整して、3 つすべての合計が 100 になるようにします。

jQuery:

<script type="text/javascript">
    $().ready(function () {

        //set the initial values for the spans
        var sliders = $('.slider');
        sliders.each(function (index, element) {
            var slider = $(this);
            slider.next('span').text(element.value);
        })

        $('.container').on('change', '.slider', function () {
            var slider = $(this);
            var sliderId = this.id;
            var amount = this.value;
            slider.next('span').text(amount);

            //Iterate over the sliders that are not being changed, and update them
            var sliders = $('.slider');
            var sliderCount = sliders.length;
            var otherSlidersCount = sliderCount - 1;
            sliders.each(function (index, element) {
                var x_id = this.id;

                if (x_id != sliderId) {
                    var totalChangeAmount = 100 - amount;
                    var sliderChangeAmount = totalChangeAmount / otherSlidersCount;
                    this.value = sliderChangeAmount;
                    $(this).next('span').text(sliderChangeAmount);
                }

            })

        });
    });
</script>

これは、作業コードを含む jsfiddle です。

jsfiddle

私が抱えている問題は、変化するスライダーからの変化したパーセンテージを他のスライダーの数 (2) で割り、その量を他の 2 つのスライダーのそれぞれに均等に割り当てることです。

変更されていない各スライダーのスパンの値が既存の値に対して変更されるように変更する必要があります。たとえば、スライダー 1 を 70 から 80 に増やすと、スライダー 2 は 5 から 15 に減少し、スライダー 3 も 5 から 5 に減少します (合計で 100%)。

これを達成する方法についての提案を手伝ってくれる人はいますか?

4

1 に答える 1

1

最善の策は、最近使用されていないスライダーを追跡し、その値のみを更新することです。特にスライダーが 3 つしかない場合はかなりのコーディングになりますが、ほとんど何でもできるようになります。

于 2013-04-24T03:50:09.980 に答える