Question

我有三个Jquery UI sliders。当用户单击下一个按钮时，我需要获取每个滑块的值，并在if else语句中检查每个滑块的值。例如，如果第一个滑块小于10，它将做一件事，如果第一个和第二个滑块小于10，它将执行其他操作。

您可以在Codepen上看到我的代码的实时示例：http://codepen.io/anon/pen/vLdKJv

这是我的HTML：

<div id="eq">
   <span id="one">88</span>
   <span id="two">77</span>
   <span id="three">55</span>
</div>
<br><br>
<div style="width:100%">
   <button>CLICK ME</button>
<div>

这是我的JS

$(function() {
$( "#eq > span" ).each(function() {
  // read initial values from markup and remove that
  var value = parseInt( $( this ).text(), 10 );
  $( this ).empty().slider({
    value: value,
    range: "min",
    animate: true,
    orientation: "horizontal"
  });
  $('button').on('click',function(){
     if(this.value < 10){
     $('body').css('background','red');
         }
       })
     });
  });

这是我的CSS

#eq > span {
 width:120px;
 float:left; 
 margin:15px;
}
#eq{
 width:100%;
 margin: 0 auto; 
 display:block;
 position: absolute;
 left:5%;
}
button{
  position: absolute;
  left:20%;
  margin-top:2%;
}

所以现在我不确定如何1.获取点击和放大器上每个滑块的值2.点击后点击检查每个值。根据滑块的值执行某个任务。

Answer 1

您可以执行以下操作：

 $('button').on('click',function(){
        if($("#eq > :nth-child(1)").data('ui-slider').options.value > 10){
             console.log('The first value is higher than 10');
        } else {
             console.log('The first value is lower than 10');
        }
        if($("#eq > :nth-child(2)").data('ui-slider').options.value > 10){
             console.log('The second value is higher than 10');
        } else {
             console.log('The second value is lower than 10');
        }
        if($("#eq > :nth-child(3)").data('ui-slider').options.value > 10){
             console.log('The last value is higher than 10');
        } else {
             console.log('The last value is lower than 10');
        }
});

希望这可以帮到你

Answer 2

这是值得尝试的事情：

jsFiddle Demo

$('#mybutt').click(function(){
    $('#eq>span').each(function(){
        var ndx = $(this).index() +1; //which slider you are on (zero-based, so add 1)
        var val = $(this).slider( "value" );

        if (val < 10) $('body').css({'background':'red'});
    });
});

此外，您可以分配每个滑块和ID，并通过ID特别请求其值：

$('#mybutt').click(function(){
    $('#rpt').html('');
    var s1 = $("#one").slider( "value" );
    var s2 = $("#two").slider( "value" );
    var s3 = $("#three").slider( "value" );

    if (s1 < 10) {
        $('body').css({'background':'red'});
    }else if (s2 < 10){
        $('body').css({'background':'green'});
    }else if (s3 < 10){
        $('body').css({'background':'blue'});
    }

    $('#rpt').html('s1:['+s1+']   s2:[' +s2+ '   s3:['+s3+']');
});

New jsFiddle Demo

Answer 3

有多种方法可以实现您的目标。

<强>基本如何获得滑块的值

$( "#one" ).slider( "value" ); //It will return the value of slider one try doing for rest

下一步为幻灯片添加slide和change个事件，并指定一个处理逻辑的函数

$( "#one, #two, #three" ).slider({
  orientation: "horizontal",
  range: "min",
  max: 255,
  value: 127,
  slide: functionToHandleLogic,
  change: functionToHandleLogic
});
//  $( "#one" ).slider( "value", 255 ); This can be used to set initial value
//  $( "#two" ).slider( "value", 140 );
//  $( "#three" ).slider( "value", 60 );

});

只要滑块发生变化或滑动，就会调用

functionToHandleLogic。

现在您已了解如何initialize滑块包含事件以及如何使用滑块id获取滑块的值。你可以在functionToHandleLogic中将这两个结合在一起。在函数中获取滑块的所有3个值并决定它将做什么。

您还可以单独initialize每个滑块，并拥有自己的onchange和onslide功能，这将独立完成。

以上解决方案是动态的。 Next按钮变得多余。

如果您想在next按钮上执行此操作，请在按钮点击事件中包含functionToHandleLogic的逻辑，并从初始化中删除slide和change事件。

<强>的jsfiddle https://jsfiddle.net/c0p10cxv/ 这包括上述解决方案。尝试更改滑块和按钮单击。四处游玩并尝试包含您的逻辑。看看它是如何运作的。

如何在点击按钮时检查多个范围滑块的值，然后根据值做一些事情？

3 个答案: