Question

我有一个范围滑块，最大值为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>

我想这最能说明我想要做什么，但我无法做到。我已经尝试过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>

Answer 1

我希望这就是你要找的东西

$(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/

Answer 2

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

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

Demo

希望它足够干净。

Answer 3

使用jQuery.on（“change”）事件。

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

每次移动滑块时，文本都会以某种方式更改。你的代码应该已经这样做了。

该功能将在您的那个范围内分配一个触发器，它将查看它是否已更改并应用所需的样式。

编辑：将此应用于您点击

的功能

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

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

3 个答案:

Demo