Question

我试图在滑块移动时更改div文本的颜色。我让它工作，以便第一个数字将改变。但是，我需要在许多div上发生这种情况。我目前正在尝试使用.each（），但我没有得到我想要的结果。第二个div和其余的div只是改变为第一个div的颜色。这是一个JSFiddle，向您展示我到目前为止所拥有的内容。 div中的数字应该是红色的＆＃39;如果它们大于滑块值并且绿色＆＃39;如果它们小于滑块值。它们似乎正在根据第一个div的值而改变。

function updateSliderValue(newValue) {   
    $('#rangeValue1').val(newValue);
    var str = $('#someid').text()
    var num = parseFloat(str, 10);

    $('.value').each(function(){
        if (newValue > num) {
            $('.wrapped .value').removeClass('bully').addClass('normal');
        } else {
            $('.wrapped .value').removeClass('normal').addClass('bully');
        }
    });
}

这是我用来尝试正确更改div颜色的JQuery代码。

非常感谢！基里耶

Answer 1

使用$（this）并在$（'。value'）中定义num。each（）;

$('.value').each(function(){
    var str = $(this).text();
    var num = parseFloat(str, 10);
    if (newValue >= num) {
        $(this).removeClass('bully').addClass('normal');
    } else {
        $(this).removeClass('normal').addClass('bully');
    }
});

以下是经过修改的版本：http://jsfiddle.net/61vd3u79/

Answer 2

我认为如果你稍微改变你的代码，它应该可以工作

function updateSliderValue(newValue) {   
  $('#rangeValue1').val(newValue);
  var str = $('#someid').text()
  var num = parseFloat(str, 10);

  $('.value').each(function(){
    if (newValue > num) {
        $(this).removeClass('bully').addClass('normal');
    } else {
        $(this).removeClass('normal').addClass('bully');
    }
  });
}

$（this）引用foreach中的当前div。

在滑块更改中经历所有类的出现

2 个答案: