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

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 事件。

JSFiddlehttps://jsfiddle.net/c0p10cxv/ 这包括上述解决方案。尝试更改滑块并单击按钮。尝试并尝试包括您的逻辑。看看它如何为您服务。

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

How to check value of multiple range sliders on click of button and then do something based off of value?

javascript

jquery

html

jquery-ui

jquery-ui-slider