Question

我正在使用两个滑块创建一个储蓄计算器。有两个输入（学生数和组大小）和两个输出（省钱和节省时间）。我收录了一张图片供参考。计算工作正常但我必须点击刷新才能在移动滑块时看到新的答案。相反，我想在移动滑块时改变我的答案。

我在这个网站上工作，但对计算进行了更改：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>

非常感谢任何帮助。

Answer 1

围绕执行更新的JavaScript创建一个函数并获取值，然后在slider change event上调用它。

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元素而不是写入文档，或者每次更改滑块时都会不断添加文本。

Answer 2

你追求的是jQuery Slider Plugin: onchangestate 我还编辑了你的javascript代码。要获得滑块值，请更好地使用val，例如：

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

要更新文字，请更好地使用text，例如：

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

以下是我使用过的代码并按您的意愿工作：

HTML CODE

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

从两个滑块持续更新值

2 个答案: