1

私は 2 つの Jquery スライダーを持っていますが、それらを連携させると壊れてしまいます。最初のスライダーは体重を測定し、2 番目のエクササイズはエクササイズです。私は最終的な値をコーディングしようとしています。「結果」は両方の結果を表示します。

最初のウェイト スライダーが増加すると、結果の値も増加します。2 番目のエクササイズ スライダーが増加すると、最終結果は減少します。理解するまで単純な数値を使用していますが、それらを連携させるにはどうすればよいですか?

$(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に役立つと思われる簡単な例を作成しました 。問題の 1 つは 2 番目のスライダーの初期化だったと思うので、デフォルトを 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 が呼び出されます。この関数は、体重から運動量を差し引いた瞬間の 2 つの値を関連付ける、より複雑な関数を作成できる場所です。これが役立つことを願っています

于 2013-07-25T16:48:05.363 に答える