Question

我有2个Jquery滑块，当我让它们一起工作时，它们会断裂。第一个滑块测量重量，第二个滑块测量。我正在尝试编写最终值，“结果”显示两者的结果。

当第一个重量滑块增加时，结果值也会增加。当第二个运动滑块增加时，最终结果会下降。我只是使用简单的数字值，直到我了解它，我如何让它们一起工作？

$(function() {
    $( "#slider_1" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "+" + ui.value );
      }
    });
    $( "#amount" ).val( "+" + $( "#slider_1" ).slider( "value" ) );
  });
  $(function() {
    $( "#slider_2" ).slider({
      value:100,
      min: 0,
      max: 9,
      step: 5,
      slide: function( event, ui ) {
        $( "#amount2" ).val( "+" + ui.value );
      }
    });
    $( "#amount2" ).val( "$" + $( "#slider_2" ).slider( "value" ) );
  });

Answer 1

我已经创建了一个简单的例子，希望有所帮助 JSFiddle。我认为其中一个问题是你初始化第二个滑块，所以我把它改为默认值为0并且步长为1.

HTML

 <div id="slider_1"></div>
 <div id="slider_2"></div>
 <input id="amount"></input>

的Javascript

$(function() {

var weightSliderValue = 0;
var exerciseSliderValue = 0;

function changeValue(){
    var currentSliderValue = weightSliderValue - exerciseSliderValue;
    $( "#amount" ).val( currentSliderValue );

}

$( "#slider_1" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
      weightSliderValue = ui.value;
      changeValue();
  }
});

$( "#slider_2" ).slider({
  value:0,
  min: 0,
  max: 9,
  step: 1,
  slide: function( event, ui ) {         
      exerciseSliderValue = ui.value;
      changeValue();
  }
});

}）;

每个滑块移动设置其对应的变量，然后调用changeValue。这个函数是你可以创建一个更复杂的函数来关联我刚从减肥中减去运动的那两个值。我希望这有帮助

Answer 2

Here你可以找到一个很好的例子。

Jquery UI滑块 - 2一起计算金额

2 个答案: