javascript - 如何在单击按钮时检查多个范围滑块的值，然后根据值执行某些操作？

我有三个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.单击后检查每个值并根据滑块的值执行特定任务。

最佳答案

这里有一些尝试：

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