多個jQuery-UI滑塊組合總數

Question

我試圖實現一個頁面，其中有4個jQuery-UI滑塊，並且我想使它成爲所有4個滑塊的組合總數將永遠不會超過400.

我不介意這種實現方式，它可以從0開始，並且只要您更改1個滑塊，剩餘的可用總數就會減少，或者將滑塊設置爲超過最大值，減少其他滑塊上的值。

P.S.滑塊以10爲增量。

所有想法&建議，歡迎使用，如果您想測試，我建立了jsFiddle。

Answer 1

那麼這裏亞去：

var sliders = $("#sliders .slider"); 

sliders.each(function() { 
    var value = parseInt($(this).text(), 10), 
     availableTotal = 400; 

    $(this).empty().slider({ 
     value: 0, 
     min: 0, 
     max: 400, 
     range: "max", 
     step: 10, 
     slide: function(event, ui) { 
      // Update display to current value 
      $(this).siblings().text(ui.value); 

      // Get current total 
      var total = 0; 

      sliders.not(this).each(function() { 
       total += $(this).slider("option", "value"); 
      }); 

      // Need to do this because apparently jQ UI 
      // does not update value until this event completes 
      total += ui.value; 

      var max = availableTotal - total; 

      // Update each slider 
      sliders.not(this).each(function() { 
       var t = $(this), 
        value = t.slider("option", "value"); 

       t.slider("option", "max", max + value) 
        .siblings().text(value + '/' + (max + value)); 
       t.slider('value', value); 
      }); 
     } 
    }); 
}); 

下面是一個簡單的演示：http://jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

作了上述回答的更新版本，以顯示100％的百分比。因此，當您調整一個滑塊時，另外兩個滑塊會減少，使每個滑塊的百分比合計爲100％。也可以輕鬆設置初始值

JSfiddle

var sliders = $("#sliders .slider"); 
var availableTotal = 100; 

sliders.each(function() { 
    var init_value = parseInt($(this).text()); 

    $(this).siblings('.value').text(init_value); 

    $(this).empty().slider({ 
     value: init_value, 
     min: 0, 
     max: availableTotal, 
     range: "max", 
     step: 2, 
     animate: 0, 
     slide: function(event, ui) { 

      // Update display to current value 
      $(this).siblings('.value').text(ui.value); 

      // Get current total 
      var total = 0; 

      sliders.not(this).each(function() { 
       total += $(this).slider("option", "value"); 
      }); 

      // Need to do this because apparently jQ UI 
      // does not update value until this event completes 
      total += ui.value; 

      var delta = availableTotal - total; 

      // Update each slider 
      sliders.not(this).each(function() { 
       var t = $(this), 
        value = t.slider("option", "value"); 

       var new_value = value + (delta/2); 

       if (new_value < 0 || ui.value == 100) 
        new_value = 0; 
       if (new_value > 100) 
        new_value = 100; 

       t.siblings('.value').text(new_value); 
       t.slider('value', new_value); 
      }); 
     } 
    }); 
}); 

Answer 3

我發現當其他滑塊（比你移動一個其他的那些）左右移動，它的分心。我也修改了江江小提琴，現在只要你達到400就可以停下來。如果你想讓這個滑桿變得更高，你首先必須降低其中一個，就像第一個，但它保持滑塊相對於整體的總量。

這意味着當你有一個滑塊在25％和另一個在50％時，他們看起來像他們分別在25和50。

JSfiddle

var sliders = $("#sliders .slider"); 

sliders.each(function() { 
    var value = parseInt($(this).text(), 10), 
     availableTotal = 400; 

    $(this).empty().slider({ 
     value: 0, 
     min: 0, 
     max: 400, 
     range: "max", 
     step: 10, 
     animate: 100, 
     slide: function(event, ui) { 

      // Get current total 
      var total = 0;  

      sliders.not(this).each(function() { 
       total += $(this).slider("option", "value"); 
      });  


      var max = availableTotal - total;    

      if (max - ui.value >= 0) { 
       // Need to do this because apparently jQ UI 
       // does not update value until this event completes 
       total += ui.value; 
       console.log(max-ui.value); 
       $(this).siblings().text(ui.value); 
      } else { 
       return false; 
      } 
     } 
    }); 
}); 

Answer 4

不回答這些問題單之一是在任何有效的方式在不斷變化的關係滑塊彼此最低位有效......他們大多留一個或多個出的計算或者不尊重整體限制，我需要一些東西讓用戶在HTML5遊戲中選擇他們的芯片，所以如果其他人有類似的問題，我想出了這個...如果你不需要把它綁定到像改變投注籌碼然後只是取消停止選項或改變它以滿足您的需求

<div id="chip_holder" style="float:right;margin-right:20px;"> 
    <ul id="sliders"> 
    <?php 
    $chips = array("1" => array("blue", "1 Point", "1"), "5" => array("red", "5 Points", "5"), "10" => array("gold", "10 Points", "10")); 

     $t = 0; 
     $value_per_row = floor($my_points/count($chips)); 
      $totalc = 0; 
     foreach($chips as $key => $value){ 
     $value = floor($value_per_row/$value[2]); 
     $totalc = $totalc + $value_per_row; 
     ?> 
     <li style="display:inline-block;"> 
       <input type="number" style="display:none;" id="hidden_value_<?php echo $key; ?>" value="<?php echo floor($value); ?>" min="0" max="<?php echo $my_points; ?>" step="<?php echo $chips[$key][2]; ?>" /> 
       <span id="slide_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_slider" alt="<?php echo $key/$my_points; ?>"></span> 
       <span id="chip_label_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_label"><?php echo $value; ?></span> 
     </li> 
    <?php 
     $t++; 
     } 
     if($totalc < $my_points){ 
     $min = min(array_keys($chips)); 
     $remainder = floor(($my_points - $totalc)/$chips[$min][2]); 
    ?> 
     <script> 

      $('#hidden_value_<?php echo $min; ?>').val(parseInt($('#hidden_value_<?php echo $min; ?>').val()) + parseInt(<?php echo $remainder; ?>)); 
      $('#chip_label_<?php echo $min; ?>').text(parseInt($('#hidden_value_<?php echo $min; ?>').val())); 
     </script> 
     <?php } ?> 
      <li id="checkout_button" onclick="javascript: checkout_now();"><?php echo CASHOUT; ?></li> 

     </ul> 
     <ul id="chips_stay_put"> 
     <?php 
      $t = 0; 
      foreach($chips as $key => $value){ 
      ?> 
       <li class="chip_holder" style="width:70px;"> 
        <span id="chip_holder_<?php echo $key; ?>" class="<?php echo $value[0]; ?>" alt="<?php echo $key; ?>"></span> 
      </li> 
       <?php 
      $t++; 
      } 
     ?> 
     </ul> 
     </div> 
<script> 
function drop_chips(id, chips){ 

$('.chip_label').each(function(){ 

     id =$(this).attr('id'); 
     idx =$('#' + id).attr('title'); 
    chips = parseInt($('#chip_label_' + idx).text()); 
    cls = $('#chip_holder_' + idx).attr('class'); 

    $('#chip_holder_' + idx).html(''); 

    m = minMaxTitle($('.chip.' + cls)); 

    if(m>0){ 
     start = 0; 
    }else{ 
     start = m; 
    } 
    htmlH = ''; 

     while(m<=chips){ 
     start= start + m; 
      zIndex = parseInt(start) + parseInt(100); 

      htmlH += '<span id="chip_' + idx + '_' + m + '" class="chip ' + cls + '" style="position:absolute;top:-'+ (m * 3) + 'px;z-index:' + zIndex + ';" alt="' + cls + '" title="' +m+ '">' + idx + '</span>'; 

      m++; 

    } 

    $('#chip_holder_' + idx).html(htmlH); 


     $('.chip').draggable({ 
      drag: function(event, ui) { 
       var snapTolerance = $(this).draggable('option', 'snapTolerance'); 
       var topRemainder = ui.position.top % 20; 
       var leftRemainder = ui.position.left % 20; 

       if (topRemainder <= snapTolerance) { 
       ui.position.top = ui.position.top - topRemainder; 
       } 

       if (leftRemainder <= snapTolerance) { 
       ui.position.left = ui.position.left - leftRemainder; 
       } 
      } , 

      revert : function(event, ui) { 
       // on older version of jQuery use "draggable" 
        // $(this).data("draggable") 
        // on 2.x versions of jQuery use "ui-draggable" 
        // $(this).data("ui-draggable") 
        $(this).data("uiDraggable").originalPosition = { 
        top : 0, 
        left : 0 
        }; 
        // return boolean 
        return !event; 
        // that evaluate like this: 
        // return event !== false ? false : true; 
       } 

     }); 
    }); 

} 
var sliders = $("#sliders .chip_slider"); 

sliders.each(function() { 
    var slider_id; 
    var value = parseInt($(this).text(), 10), 
     availableTotal = parseInt($('#my_points_hidden').val()); 

    $(this).empty().slider({ 
     value: parseInt($('#' + $(this).attr('id')).prev('input').val()), 
     min: 0, 
     max: parseInt($('#' + $(this).attr('id')).prev('input').attr('max')), 
     range:parseInt($('#' + $(this).attr('id')).prev('input').attr('max')), 
     orientation:"vertical", 
     step: 1, 
     animate: 100, 
     stop: function(event, ui) { drop_chips() }, 
     slide: function(event, ui) { 

     // Update display to current value 
      $(this).siblings('.value').text(ui.value); 

      // Get current total 
      var total = 0; 

     var slider_id = $(this).attr('title'); 

      sliders.not(this).each(function() { 
       total += $(this).slider("option", "value"); 
      }); 

      // Need to do this because apparently jQ UI 
      // does not update value until this event completes 
      total += ui.value; 

      var delta = availableTotal - total; 

      // Update each slider 
      sliders.not(this).each(function() { 
       var t = $(this), 
        value = t.slider("option", "value"); 

       var new_value = value + (delta/2); 

       if (new_value < 0 || ui.value == 100) 
        new_value = 0; 
       if (new_value > 100) 
        new_value = 100; 

       t.siblings('.value').text(new_value); 
       t.slider('value', new_value); 
       id = $(this).attr('id'); 

       title = $('#' + id).attr('title'); 
       initial_slider = total - new_value; 
       console.log(slider_id); 
     $('#chip_label_' + slider_id).text(parseInt(parseInt(ui.value)/parseInt($('#hidden_value_' + slider_id).attr('step')))); 
       $('#chip_label_' + title).text(parseInt(parseInt(new_value)/parseInt($('#hidden_value_' + title).attr('step')))); 
       }); 

     } 

    }); 
}); 

</script>