Question

我正在使用短期ui滑块实用程序，并以下列情况结束。我有三个滑块组合在一起，以便使用它们的结果并改变一个对象的css box-shadow。这是我的代码：

$('#slider2, #slider3, #slider4').slider({
    range: 'min',
    min: 0,
    max: 100,
    step: 1,
    animate: true,
    slide: function(x,y,z) {
        var x = $('#slider2').slider('value'),
            y = $('#slider3').slider('value'),
            z = $('#slider4').slider('value')
        $('#xShadowValue').val(x + ' px');
        $('#yShadowValue').val(y + ' px');
        $('#zShadowValue').val(z + ' px');          
        $('#target').css('box-shadow', x + 'px ' + y + 'px ' + z + 'px ' + '#888888');
    }
});

$('#xShadowValue').val($('#slider2').slider('value') + ' px');
$('#yShadowValue').val($('#slider3').slider('value') + ' px');
$('#zShadowValue').val($('#slider4').slider('value') + ' px');

问题是，当我改变第一个时，一切都很好。当我改变第二个时，第一个降低或增加一个单位，当我改变时，第三个发生在第二个。此外，我无法将它们全部滑动到0或100.相应地，限制显示为1和99。提前完成。

Answer 1

原因是您使用$("#slider").slider("value")来检索值。

我在文档中提到了，但根据this bug ticket中的说明，您应该使用ui.value来获取 new 滑块的值和value方法，以获取滑块的旧值。这解释了你的两个问题。

考虑到这一点，您必须稍微调整一下代码，以便为每个滑块利用ui.value。

我会改变两件事：

使用data-*属性指定哪个滑块对应于哪个轴：

<div id="slider2" class="slider" data-axis="x"></div>
<div id="slider3" class="slider" data-axis="y"></div>
<div id="slider4" class="slider" data-axis="z"></div>

更新您的slide回调以利用这些属性：

var boxShadow = {
    x: 0,
    y: 0,
    z: 0
};

$('#slider2, #slider3, #slider4').slider({
    step: 1,
    animate: true,
    slide: function(event, ui) {
        var axis = $(this).data("axis");

        boxShadow[axis] = ui.value;

        $('#xShadowValue').val(boxShadow.x + ' px');
        $('#yShadowValue').val(boxShadow.y + ' px');
        $('#zShadowValue').val(boxShadow.z + ' px');            

        $('#target').css('box-shadow', boxShadow.x + 'px ' + boxShadow.y + 'px ' + boxShadow.z + 'px ' + '#888888');
    }
});

基本上，保留一个跟踪x，y和z的简单对象。使用上述data-*属性可以轻松更新此对象。

示例： http://jsfiddle.net/t3gva/

jQuery ui多个滑块与值混淆

1 个答案: