jQuery ui多个滑块混淆值

我正在使用一段时间的ui滑块实用程序，并以下列情况结束。我有三个滑块组合在一起，以便使用它们的结果并更改对象的CSS盒阴影。这是我的代码：jQuery ui多个滑块混淆值

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

来源

2012-02-27 Marios Fakiolas

我没有看到你复位..莫非是原因值？ – XepterX 2012-02-27 01:46:18

这很奇怪。能够在这里重现：http://jsfiddle.net/aNjM6/ – 2012-02-27 02:15:36

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

这是不从我可以看到文档中提及，但根据this bug ticket一张纸条，你应该使用ui.value获得滑块的新值和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/

来源

2012-02-27 02:30:33

Thanx工作顺利 – 2012-02-27 10:09:55

jQuery ui多个滑块混淆值

回答

相关问题