1

I've got 2 Jquery sliders and when I get them working together they break. The first slider measures weight, and the second exercise. I'm trying to code a final value, the 'outcome' the displays the outcome of both.

When the 1st weight slider increases, so does the outcome value. When the 2nd exercise slider increases, the final outcome goes down. I'm just using simple number values until i get my head around it, how do I get them working together?

$(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" ) );
  });
4

2 回答 2

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。在我刚刚从体重中减去运动的那一刻，您可以在此函数中创建一个更复杂的函数来关联这两个值。我希望这有帮助

于 2013-07-25T16:48:05.363 回答
0

在这里你可以找到一个很好的例子。

于 2013-07-25T16:56:27.363 回答