jQuery的UI滑塊值取決於活動的單選按鈕

我有一個jQuery UI滑塊從0到200，以10爲增量。滑塊的值出現在一個框中。到目前爲止，這麼容易。jQuery的UI滑塊值取決於活動的單選按鈕

現在我的滑塊旁邊有3個單選按鈕，分別標記爲「完整」，「半」和「四分之一」。「完整」按鈕是默認選中的。

我想要滑塊顯示的值將所選單選按鈕值考慮在內，以便當選擇「全部」時，位置80上的滑塊顯示80，但當「半」按鈕處於活動狀態時，滑塊在同一位置應該在輸出文本中產生值40。等等。

不僅當滑塊移動時，而且當單選按鈕狀態改變時，輸出值必須更新。

可悲的是我還沒有想出如何使用滑塊值計算中的活動單選按鈕值。當單選按鈕改變時，我也不知道如何觸發重新計算。誰能幫忙？

編輯：由於這裏要求是什麼小碼我

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 42, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider").slider("value")); 
    }); 
</script>

這基本上是剛剛從jQuery UI的網站的例子。

的HTML是：

<div> 
    <form> 
     <input type="radio" name="factor" value="1"> 1 Processor<br> 
     <input type="radio" name="factor" value="2"> 2 Processors<br> 
     <input type="radio" name="factor" value="4"> 4 Processors 
    </form> 
</div> 
<div id="slider"></div> 
<div> 
    Time needed: <input type="text" id="amount" readonly> 
</div>

我簡化這個例子。真正的網站將有不同型號的激光/等離子切割機列出的基本型號具有時間因素1和更快的值高達6.3

編輯＃2：我設法得到滑塊因素這樣的活動單選按鈕的值：

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 40, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       var divisor = $('input:radio[name=factor]:checked').val(); 
       $("#amount").val(ui.value/divisor + " minutes"); 
      } 
     }); 
     var divisor = $('input:radio[name=factor]:checked').val(); 
     $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
    }); 
</script>

我還沒有想出如何在更改單選按鈕時直接更改輸出值。現在它只在移動滑塊時重新計算值。

來源

2014-09-23 Konadi

您應該向我們展示您到目前爲止所嘗試的內容，或者至少是您使用的JS代碼以及所涉及的HTML元素。 – 2014-09-23 11:23:32

謝謝。我已經添加了更多信息。 – Konadi 2014-09-23 12:26:48

試試這個：http://jsfiddle.net/lotusgodkk/GCu2D/351/

var slider; 
$(document).ready(function() { 
    slider = $('.checked').slider({ 
     max: 200, 
     min: 0, 
     step: 10, 
     value: 200, 
     slide: function (event, ui) { 
      $('.i[value="' + ui.value + '"]:first').attr('checked', true).change(); 
     } 
    }); 
    $('.i').change(function() { 
     var checked = $('.i:checked').val(); 
     slider.slider('value', checked); 
    }); 
});

HTML：

<div class="checked"></div>Full 
<input type="radio" value="200" class="i" checked="true" name="a" />Half 
<input type="radio" value="100" class="i" name="a" />Quarter 
<input type="radio" value="50" class="i" name="a" />

來源

2014-09-23 11:33:28

謝謝，但遺憾的是，這並沒有真正做到我想要的。你的解決方案移動滑塊，在那裏我需要滑塊保持它的位置，並根據所選的單選按鈕修改輸出文本。 – Konadi 2014-09-23 12:27:54

與此相似http://jsfiddle.net/lotusgodkk/GCu2D/352/？ – 2014-09-23 12:41:50

該做的伎倆。第一個腳本用於當滑塊移動時，第二個腳本在單選按鈕更改時更新值。

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 40, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       var divisor = $('input:radio[name=factor]:checked').val(); 
       $("#amount").val(ui.value/divisor + " minutes"); 
      } 
     }); 
     var divisor = $('input:radio[name=factor]:checked').val(); 
     $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
    }); 
</script> 

<script> 
    $(document).ready(function() { 
     $('input[type=radio][name=factor]').change(function() { 
      var divisor = $('input:radio[name=factor]:checked').val(); 
      $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
     }); 
    }); 
</script>

來源

2014-09-23 12:59:38 Konadi

jQuery的UI滑塊值取決於活動的單選按鈕

回答

相關問題