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

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

您可以在Codepen上看到我的代码的一个实例：

这是我的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>

---

所以现在我不知道该怎么做。在单击&2时获取每个滑块的值。单击并执行基于滑块值的特定任务后，检查每个值

您可以执行以下操作：

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

---

希望这能帮助您

您可以做以下事情：

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

---

希望这能帮助你

这里有一些东西可以尝试：

$（'#mybutt'）。单击（函数（）{
$（'#eq>span'）。每个（函数（）{
var ndx=$（this）.index（）+1；//您在哪个滑块上（从零开始，所以添加1）
var val=$（this）.slider（“值”）；
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+']');
});

$（'#mybutt'）。单击（函数（）{
$（'#rpt'）.html（''）；
变量s1=$（“#一”）.滑块（“值”）；
变量s2=$（“#2”）.滑块（“值”）；
var s3=$（“#三”）.滑块（“值”）；
如果（s1<10）{
$（'body'）.css（{'background'：'red'}）；
}否则如果（s2<10）{
$（'body'）.css（{'background'：'green'}）；
}否则如果（s3<10）{
$（'body'）.css（{'background'：'blue'}）；
}
$（'#rpt'）.html（'s1:['+s1+']s2:['+s2+'s3:['+s3+']）；
});

---

这里有一些东西可以尝试：

$（'#mybutt'）。单击（函数（）{
$（'#eq>span'）。每个（函数（）{
var ndx=$（this）.index（）+1；//您在哪个滑块上（从零开始，所以添加1）
var val=$（this）.slider（“值”）；
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+']');
});

$（'#mybutt'）。单击（函数（）{
$（'#rpt'）.html（''）；
变量s1=$（“#一”）.滑块（“值”）；
变量s2=$（“#2”）.滑块（“值”）；
var s3=$（“#三”）.滑块（“值”）；
如果（s1<10）{
$（'body'）.css（{'background'：'red'}）；
}否则如果（s2<10）{
$（'body'）.css（{'background'：'green'}）；
}否则如果（s3<10）{
$（'body'）.css（{'background'：'blue'}）；
}
$（'#rpt'）.html（'s1:['+s1+']s2:['+s2+'s3:['+s3+']）；
});

---

有多种方法可以实现您正在尝试的目标

基础知识 如何获取滑块的值

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

下一步包括滑块的

幻灯片

和

更改

事件，并分配一个处理逻辑的函数

$( "#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

现在，您知道了如何使用事件初始化滑块，以及如何使用滑块的id获取滑块的值。您可以在

函数中将这两个值合并到handleLogic

中。在函数中获取滑块的所有3个值，并决定它将做什么

您还可以分别初始化每个滑块，并拥有自己的

onchange

和

onslide

功能，这些功能将独立完成操作

上述解决方案是动态的。

Next

按钮变得多余

如果要在

next

按钮单击中执行此操作，请在按钮单击事件中包含

函数的逻辑以处理逻辑，并从初始化中删除
幻灯片
和
更改
事件

JSFiddle
这包括上面提到的解决方案。尝试更改滑块并单击按钮。播放并尝试包含您的逻辑。看看它是如何为您工作的。
有多种方法可以实现您正在尝试的目标

基础知识
如何获取滑块的值

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

下一步包括滑块的
幻灯片
和
更改
事件，并分配一个处理逻辑的函数

$( "#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

现在，您知道了如何使用事件初始化滑块，以及如何使用滑块的id获取滑块的值。您可以在
函数中将这两个值合并到handleLogic
中。在函数中获取滑块的所有3个值，并决定它将做什么

您还可以分别初始化每个滑块，并拥有自己的
onchange
和
onslide
功能，这些功能将独立完成操作

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

如果要在
next
按钮单击中执行此操作，请在按钮单击事件中包含
函数的逻辑以处理逻辑，并从初始化中删除
幻灯片
和
更改
事件

JSFiddle
这包括上面提到的解决方案。尝试更改滑块并单击按钮。玩游戏并尝试包含您的逻辑。看看它是如何为您工作的。
您可能想看一看我看了，我仍然不明白如何从同一页面上的3个不同滑块中获取值。您可能想看一看我看了，我till不知道如何从同一页上的3个不同滑块中获取值。