Javascript 显示jQuery UI滑块的值并相应地更改颜色

我有一个范围滑块，最大值为8，最小值为1

我已经将脚本设置为在跨度中显示范围滑块的值。现在，每当文本变高时，我都会尝试更改颜色和比例

我的代码：

<span id="currentval">1</span>
            <script>
                if($('#currentval').text() == '1')
                {
                    $('#currentval').css("color","#202a34");
                }
                if($('#currentval').text() == '2')
                {
                    $('#currentval').css("color","#1e3547");
                }
                if($('#currentval').text() == '3')
                {
                    $('#currentval').css("color","#1b405b");
                }
                if($('#currentval').text() == '4')
                {
                    $('#currentval').css("color","#184b6e");
                }
                if($('#currentval').text() == '5')
                {
                    $('#currentval').css("color","#165682");
                }
                if($('#currentval').text() == '6')
                {
                    $('#currentval').css("color","#136095");
                }
                if($('#currentval').text() == '7')
                {
                    $('#currentval').css("color","#116ba9");
                }
                if($('#currentval').text() == '8')
                {
                    $('#currentval').css("color","#0e76bc");
                }
            </script>

1
如果（$（'#currentval'）.text（）='1'）
{
$（'#currentval'）.css（“颜色”，“#202a34”）；
}
如果（$（'#currentval'）.text（）='2'）
{
$（'currentval'）.css（“颜色”，“1e3547”）；
}
如果（$（'#currentval'）.text（）='3'）
{
$（'currentval'）.css（“颜色”，“1b405b”）；
}
如果（$（'#currentval'）.text（）='4'）
{
$（'currentval'）.css（“颜色”，“#184b6e”）；
}
如果（$（'#currentval'）.text（）='5'）
{
$（'#currentval'）.css（“颜色”，“#165682”）；
}
如果（$（'#currentval'）.text（）='6'）
{
$（'#currentval'）.css（“颜色”，“#136095”）；
}
如果（$（'#currentval'）.text（）='7'）
{
$（'#currentval'）.css（“颜色”，“#116ba9”）；
}
如果（$（'#currentval'）.text（）='8'）
{
$（'currentval'）.css（“颜色”，“0e76bc”）；
}

我想这最好地解释了我想做什么，但我不能这么做。我已经尝试过一个onchange事件，但是我没有正确理解它，所以我把它扔掉了

我希望有人能帮助我实现我的目标。提前谢谢

    <input type="hidden" name="personen" id="personen">
    <div id="defaultslide"></div>
<script type="text/javascript">
            function getPersonen() {
                document.getElementById('personen').value = $('#currentval').text();
            }

函数getPersonen（）{
document.getElementById（'personen'）。value=$（'#currentval'）。text（）；
}

//如果用户单击“下一步”，val将被放入隐藏输入中

            $(function(){
                $('#defaultslide').slider({ 
                    max: 8,
                    min: 1,
                    value: 1,
                    slide: function(e,ui) {
                        $('#currentval').html(ui.value);
                    }
                });
            });
        </script>

$（函数（）{
$（'#defaultslide'）。滑块（{
最高：8，
民:1,，
价值：1，
幻灯片：功能（e、ui）{
$（'#currentval'）.html（ui.value）；
}
});
});

使用jQuery.on（“更改”）事件

每次移动滑块时，文本都会以某种方式发生变化。您的代码应该已经在这样做了

该函数将在您的跨度上分配一个触发器，该触发器将查看它是否已更改并应用所需的样式

编辑：将其应用于单击的功能

    $('#defaultslide').slider({ 
        max: 8,
        min: 1,
        value: 1,
        slide: function(e,ui) {
            $('#currentval').html(ui.value);
            $('#currentval').trigger("change");
        });
    });

---

我希望这就是你想要的

$(document).ready(function(){

            function update() {
                var tasks_time = $('#tasks_time').slider('value');

                $("#curr-tasks_time").text(tasks_time);

               if( tasks_time == '1')
                {
                    $('.para').css("color","red");
                }
                 if( tasks_time == '2')
                {
                    $('.para').css("color","blue");
                }



            }

           $( "#tasks_time" ).slider({
                range: "min",
                value: 1,
                min: 1,
                max: 10,
                slide: function() {
                    update();
                }
            });


        });

---

Fiddle:

我会这样做-您可以使用

ui.value

直接访问回调本身中的值，并使用颜色数组相应地更改颜色

HTML

---

希望足够干净。

您使用的是jquery ui滑块吗？如果是，请在问题中标记。类似的演示也会有所帮助。尝试用数组中的查找替换if语句：

colors=[“#f00”，“#0f0”]；颜色[parseInt（$（“currentval”）.text（））]如果文本不是数字，请不要忘记检查错误。@TilwinJoy是的，我正在使用jquery ui滑块。头脑风暴抱歉，但我不知道你指的是什么。@Jeroen嗨，有问题的代码对任何未来的读者来说都是完全混乱的。其中是
currentval
的
id
元素？在哪里调用函数
getPersonen
？为什么有多个
块？你能把它放在一起清理一下吗？
span
没有一个
change
事件，这确实是我想要的。这不是我想要的方式，它仍然有点问题：）
$(document).ready(function(){

            function update() {
                var tasks_time = $('#tasks_time').slider('value');

                $("#curr-tasks_time").text(tasks_time);

               if( tasks_time == '1')
                {
                    $('.para').css("color","red");
                }
                 if( tasks_time == '2')
                {
                    $('.para').css("color","blue");
                }



            }

           $( "#tasks_time" ).slider({
                range: "min",
                value: 1,
                min: 1,
                max: 10,
                slide: function() {
                    update();
                }
            });


        });

<div id='content'>
  <div id="defaultslide"></div>
  <span id='value'>1</span>
</div>

var colors = ["red", "dodgerblue","green", "orange","purple"];

$("#defaultslide").slider({
  range: "min",
  value: 1,
  min: 1,
  max: 8,
  slide: function (e, ui) {
    var color = colors[ui.value-1] || "black"
    $('#value').text(ui.value).css('color',color)
  }
});