Question

我正在制作一个计算器，用于根据花掉的总钱，花在食物上和花在燃料上的现金（也就是数月，但这无关紧要）向用户显示返现金额。最后两个值显然包含在总支出中，但是我无法弄清楚如何使用滑块将其形象化。应该是这样的：

用户将“食物” 滑块拖动到 7000 ，它立即更改'总数花费到 7000 。
用户然后将'燃料'滑块拖动到 3000 和'总计花费” 更改为 10000 （食物+燃料）。
用户现在无法将'个总计在 10000 下面花费了滑块，直到他更改了“食物” 或“燃料” 。

我在Google上搜索到可以用setValue来做到这一点，但我不知道该怎么做（get value from one slider and change other sliders based on the value）

这是我的代码-https://jsfiddle.net/Kuroi_Mato_O/q7uv3nx6/19/

部分代码：

(function() {
  $("#slider-range-min").slider({
    range: "min",
        value: 15000,
        min: 0,
        max: 50000,
        step: 1000,
        slide: function(e, ui) {
      return $('#amount').val(ui.value).trigger("change");
    }
  });
    $("#amount").val($("#slider-range-min").slider("value"));


}).call(this);

  <div class="amount">Fuel</div>
  <p>
    <input type="text" id="amount"  style="border:0; font-weight:bold;"><span class="right_text">Рублей</span>
  </p>
  <div class="sliders" id="slider-range-min"></div>
  <br>
  <div class="amount">Food</div>
  <p>
    <input type="text" id="amount2"  style="border:0; font-weight:bold;"><span class="right_text">Рублей</span>
  </p>
  <div class="sliders" id="slider-range-min2"></div>
  <br>
   <div class="amount">Total Spent</div>
  <p>
    <input type="text" id="amount3"  style="border:0; font-weight:bold;"><span class="right_text">Рублей</span>
  </p>
  <div class="sliders" id="slider-range-min3"></div>

（从这里开始不起作用，我只是不知道如何在不完全粘贴的情况下显示代码）

使jquery滑块影响其他滑块

0 个答案: