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

Displaying the value of a jQuery UI slider and changing color accordingly

本文关键字：改变 变颜色 UI jQuery 显示      更新时间：2023-09-26

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

我已经设置了脚本，以便在span中显示范围滑块的值。现在我试着改变颜色和比例，每当文本变高。

我代码:

<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>

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

我希望有人能帮助我实现我想做的事。提前谢谢你。
    <input type="hidden" name="personen" id="personen">
    <div id="defaultslide"></div>
<script type="text/javascript">
            function 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>

希望这就是你要找的

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

        });

小提琴:http://jsfiddle.net/EAaLK/1070/

我会这样做-您可以使用ui.value直接访问幻灯片回调本身的值，并使用颜色数组相应地更改颜色。

HTML 

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

JS 

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

演示

希望够干净

使用jQuery.on("change")事件

$('#currentval').on("change", function (){
    var myval = $('#currentval').val();
    if(myval=='1') {$('#currentval').css('color','#000000');}
});

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

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

编辑:将此应用于点击 的功能
    $('#defaultslide').slider({ 
        max: 8,
        min: 1,
        value: 1,
        slide: function(e,ui) {
            $('#currentval').html(ui.value);
            $('#currentval').trigger("change");
        });
    });
相关文章：