2

我在短时间内使用了 ui 滑块实用程序，并以以下情况结束。我组合了三个滑块以使用它们的结果并更改对象的 css 框阴影。这是我的代码： 

$('#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。提前谢谢。

4

1 回答 1

2

这样做的原因是您正在使用$("#slider").slider("value")来检索值。

据我所见，文档中没有提到这一点，但根据此错误票据中的注释，您应该使用ui.value获取滑块的新值和获取滑块旧value值的方法。这解释了你的两个问题。

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

我会改变两件事：

  1. 使用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>

  2. 更新您的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/

于 2012-02-27T02:30:33.137 回答