使用 jquery 滑块使用增量号或减量号更改框颜色答案

【问题标题】：changing box color with increment number or decrement number with jquery slider使用 jquery 滑块使用增量号或减量号更改框颜色
【发布时间】：2012-05-27 15:26:43
【问题描述】：

我是 jQuery 的初学者，想知道是否有人能指出我正确的方向。我想创建一个滑块，将颜色从红色变为绿色，并记录分数。该值应从 0 开始，当用户向右滑动时，颜色变为红色，并记录为 -1 的分数。如果它向左滑动，颜色变为绿色并记录 +1 的分数。请帮忙。

JS：

$(function(){
   $( "#slider" ).slider({
      value:0,
      min: -3,
      max: 3,
      step: 1,
      slide: function( event, ui ) {
         $( "#score" ).val( ui.value );
      }
   });
   $( "#score" ).val($( "#slider" ).slider( "value" ) );
});

HTML：

<html>
<p>
  <label for="score">Rating (+/-1 increment):</label>
  <input type="text" id="score" />
</p>
<div id="slider"></div>
</html>

【问题讨论】：

你尝试了什么，你在为什么而苦苦挣扎？ - meta.stackexchange.com/a/128553
我已经成功地将输入输出，但是，我坚持将颜色放入其中，它会改变颜色。例如，我向左滑动，我的输入文本将显示-1，但我一直在输入代码以将颜色更改为红色，所以我想知道我该怎么做。感谢您的指点和帮助。非常感谢。
能否请您展示您现有的代码，或者在jsfiddle.net 设置一个演示。
感谢大家的回复。我不确定如何在 jsfiddle.net 中添加 UI，它似乎无法显示滑块。这是我的代码：-
评分（+/-1 增量）：

小提琴需要包含适当的 CSS 信息（我已经为您包含了基本的 jquery-ui.css）：jsfiddle.net/UweCD/1

标签： jquery jquery-ui colors jquery-ui-slider

【解决方案1】：

似乎设置“背景”CSS 属性就可以了。这就是你的意思吗：http://jsfiddle.net/UweCD/1/

    slide: function(event, ui) {
        $("#score").val(ui.value);
        $(this).css("background", ui.value>0 ? "green" : ui.value<0 ? "red" : "");
    }

无论如何应该足以让你开始......

【讨论】：

谢谢先生/女士！这就是我需要的。它绝对让我开始。非常感谢！