1

2 つのスライダーを使用して貯蓄計算機を作成しています。2 つのインプット (生徒数とグループサイズ) と 2 つのアウトプット (お金の節約と時間の節約) があります。参考までに画像を載せました。計算は機能していますが、スライダーを動かしたときに新しい答えを表示するには、更新を押す必要があります。代わりに、スライダーを動かすと答えが変わるようにします。

私はこのサイトから作業しましたが、計算のために変更を加えました: http://egorkhmelev.github.com/jslider/

最終的にどのように見せたいか：

<div class="layout">
    <div class="layout-slider" style="width: 20%">
        <input id="SliderSingle" type="slider" name="kids" value="20" />
        <script type="text/javascript" charset="utf-8">
            jQuery("#SliderSingle").slider({
                from: 1,
                to: 1000,
                step: 1,
                round: 1,
                format: {
                    format: '0',
                    locale: 'de'
                },
                dimension: ' Kids',
            });
            var numkids = $("#SliderSingle").slider("value");
        </script>
    </div>
    <div class="layout-slider" style="width: 20%">
        <input id="Slider" type="slider" name="group" value="20" />
        <script type="text/javascript" charset="utf-8">
            jQuery("#Slider").slider({
                from: 1,
                to: 5,
                step: 1,
                round: 1,
                format: {
                    format: '0',
                    locale: 'de'
                },
                dimension: ' Kids',
            });
            var groupsize = $("#Slider").slider("value");
        </script>
    </div>
    <script type="text/javascript" charset="utf-8">
        var timesaved = (numkids * 65) / groupsize;
        var moneysaved = timesaved * 60;
        document.write(timesaved + "hrs            ");
        document.write("   |   " + numkids + "   |   ");
        document.write("$" + moneysaved);
    </script>
    <div>

どんな助けでも大歓迎です。

4

2 に答える 2

0

更新を行って値を取得する JavaScript に関する関数を作成し、これをスライダー変更イベントで呼び出します。

function updateSavings() {
  var groupsize = $("#Slider").slider("value");
  var numkids = $("#SliderSingle").slider("value");
  var timesaved = (numkids*65) / groupsize;
  var moneysaved = timesaved * 60;

  document.write (timesaved + "hrs            ");
  document.write ("   |   " + numkids + "   |   ");
  document.write ("$" + moneysaved);
}

jQuery("#Slider").slider({
  change: function() { updateSavings(); }
});

jQuery("#SliderSingle").slider({
  change: function() { updateSavings(); }
});

ドキュメントに書き込むのではなく DOM 要素を更新するように関数を変更するか、スライダーを変更するたびにテキストを追加し続けるようにする必要があります。

于 2013-02-01T02:29:06.717 に答える
0

jQuery Slider Plugin: onchangestate私も
あなたの JavaScript コードを編集しました。スライダーの値をより適切に取得するにはval、次のように使用します。

jQuery("#Slider").val();

テキストを更新するには、次textのように を使用することをお勧めします。

jQuery('.money_saved').text("$" + moneysaved);

ここに私が使用したコードがあり、あなたが望むように動作します:

HTMLコード

<div class="layout">

    <div class="layout-slider" style="width: 20%">
        <input id="SliderSingle" type="slider" name="kids" value="20" />
    </div>
    <div class="layout-slider" style="width: 20%">
        <input id="Slider" type="slider" name="group" value="20" />
    </div>

    <div class="time_saved"></div>
    <div class="money_saved"></div>
    <div class="number_kids"></div>

</div>

Javascript

<script type="text/javascript" charset="utf-8">

  jQuery("#SliderSingle").slider({
    from: 1,
    to: 1000,
    step: 1,
    round: 1,
    format: {
      format: '0',
      locale: 'de'
    },
    dimension: ' Kids',
    onstatechange: function() {
      SliderChange();
    }
  });

  jQuery("#Slider").slider({
    from: 1,
    to: 5,
    step: 1,
    round: 1,
    format: {
      format: '0',
      locale: 'de'
    },
    dimension: ' Kids',
    onstatechange: function() {
      SliderChange();
    }
  });

  function SliderChange() {
    var numkids = jQuery("#SliderSingle").val();
    var groupsize = jQuery("#Slider").val();

    var timesaved = (numkids*65) / groupsize;
    var timesaved2decimal = Math.floor(timesaved * 100) / 100;

    var moneysaved = timesaved * 60;
    var moneysaved2decimal = Math.floor(moneysaved * 100) / 100;

    jQuery('.time_saved').text(timesaved2decimal + "hrs            ");
    jQuery('.number_kids').text("   |   " + numkids + "   |   ");
    jQuery('.money_saved').text("$" + moneysaved);
  }


</script>
于 2013-02-01T02:30:34.020 に答える