Question

我正在使用jQuery创建一个定价计算器，我有一个用户输入预算的输入，以及一个生成数字的div。我想比较两个数字，如果估计值在用户的预算范围内，我希望估算值变为绿色，如果不是，我希望它变成红色。问题是，我只希望在用户输入预算时进行比较。如果预算输入为空白，则不应进行比较。到目前为止我有这个：

<input id="budget" type="text" />
<span class="estimate">$0</span>

var budget = $("#budget").val();
var estimate = $(".estimate").text();

    if(!(budget >= estimate)){
        estimate.css('color','#ff0000');
}

通过上述内容，我试图从两个项目中获取值和文本，然后检查它们是否大于或等于彼此。有什么想法吗？

Answer 1

比较实际数字，并在元素上设置CSS，而不是你得到的值

$(function() {
    var budget   = parseInt( $("#budget").val(), 10 );
    var estimate = parseInt( $(".estimate").text().replace(/\D/g,''), 10);

    if ( budget < estimate ) {
        $(".estimate").css('color','#ff0000');
    }
});

美元符号使其成为NaN，因此应该被替换。

Answer 2

您的estimate变量定位$(".estimate").text()，即文本内容。使用$(".estimate").css('color','#ff0000');更改该元素的颜色。

如果两个值不匹配，如何更改div的颜色？

2 个答案: