1

我正在使用两个滑块创建一个储蓄计算器。有两个输入（学生人数和小组规模）和两个输出（节省金钱和节省时间）。我附上了一张图片以供参考。计算正在运行，但是当我移动滑块时，我必须点击刷新才能看到新的答案。相反，我希望我的答案随着我移动滑块而改变。

我在这个站点工作，但对计算进行了更改：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 插件：onchangestate
我还编辑了你的 javascript 代码。为了更好地使用滑块值val，例如：

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

为了更新文本，更好地使用text，例如：

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

这是我使用过的代码，可以按照您的意愿工作：

代码

<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 回答