2

異なる input type="range" スライダーを含むフォームを作成していますが、それらに値を表示させることができました。

しかし、複数のスライダーを含めている場合、値は実際には個別に変化しません。それぞれ自分で変えてほしい。

最終的には、少なくとも 10 個のレンジ スライダーが必要です。助言がありますか？ここにフィドルがあります：

http://jsfiddle.net/MfegM/1153/

あなたが提供できるヒントを事前にありがとう。

値を表示するコードは次のとおりです。 var initialValue = 50;

  var sliderTooltip = function(event, ui) {
      var curValue = ui.value || initialValue;
      var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' + curValue + '</div><div class="tooltip237-arrow"></div></div>';

      $('.ui-slider-handle').html(tooltip);

  }

  $("#slidercomeagain").slider({
      value: initialValue,
      min: 0,
      max: 100,
      step: 1,
      create: sliderTooltip,
      slide: sliderTooltip
  });


  $("#sliderrecommendation").slider({
      value: initialValue,
      min: 0,
      max: 100,
      step: 1,
      create: sliderTooltip,
      slide: sliderTooltip
  });
4

2 に答える 2

1

ここにあなたの解決策があります - http://jsfiddle.net/MfegM/1155/ ツールチップの機能をスライダーに接続する必要があります

$(this).children('.ui-slider-handle').html(tooltip);

関数は既に (event, ui) を受け取るため、必要なのは $(this) を追加して、イベントをトリガーするスライダーに結果を関連付けることだけです

于 2013-10-31T01:13:30.873 に答える
0

問題は、クラス「.ui-slider-handle」ですべての div を変更しているため、すべてのスライドでツールチップが変更されていることです。

 var sliderTooltip = function(event, ui) {
      var curValue = ui.value || initialValue;
      //get the id of the slider 
      var target =  $(event.target).attr("id");

      var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' 
             + curValue + '</div><div class="tooltip237-arrow"></div></div>';

      // update the tooltip of the target slider
      $("#"+target + ' .ui-slider-handle').html(tooltip);

  }

上記のコードは、ターゲット スライダーのツールチップのみを更新します。

jsfiddle http://jsfiddle.net/WzqjC/3/でこのデモを参照してください。

于 2013-10-31T00:07:53.307 に答える