Question

我有一个jQuery UI滑块，从0到200，增量为10。滑块的值显示在框中。到目前为止，这很容易。

现在我的滑块旁边有3个单选按钮，标有＆＃34;完整＆＃34;，＆＃34; half＆＃34;和＆＃34; quarter＆＃34;。＆＃34;完整＆＃34;默认选择按钮。

我希望滑块显示的值将所选的单选按钮值考虑在内，这样当＆＃34; full＆＃34;如果选中，80位置上的滑块显示80，但是当＆＃34;一半＆＃34;按钮处于活动状态，同一位置的滑块应在输出文本中产生值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>

我还没想到如何在单选按钮更改时直接更改输出值。现在它只在滑动滑块时重新计算值。

Answer 1

试试这个：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" />

Answer 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>

<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>

jquery UI Slider值取决于活动的单选按钮

2 个答案: