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

Question

我有三个Jquery UI sliders 。当用户单击下一个按钮时，我需要获取每个 slider 的值并在 if else 语句中检查每个 slider 的值。例如，如果第一个 slider 小于 10，它会做一件事，如果第一个和第二个 slider 小于 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. 在单击时获取每个 slider 的值 & 2. 在单击后检查每个值并根据 slider 的值执行特定任务。

Answer 1

这里有一些值得尝试的事情:

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'});
    });
});

<小时/>

此外，您可以分配每个 slider 和 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