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滑块值取决于活动的单选按钮

回答

相关问题