如何在 jquery 中更改类 nth-child() 的颜色？

Question

我想使用范围滑块 jquery ui 制作评级过滤器星并将类 (.star-group) 中的星形颜色设置为红色。 例如，如果值等级 1，我想在（ .star-group:nth-child(5) ）中设置红色 这里是代码：

$( "#slider-range" ).slider({
  orientation: "vertical",
  range: true,
  min: 1,
    max: 5,
    values: [2,4],
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
    for(i=1; i<=ui.values[0];i++) {
        //$(".df:nth-child("+i+")").addClass('clgray');
      $(".star-group").addClass('red');
    }
  }
});
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) + 
" - " + $( "#slider-range" ).slider( "values", 1 ) );

在此处查看更多信息：https://jsfiddle.net/equ92qn8/

Answer 1

在此处查找添加了 cmets 的测试解决方案：https://jsfiddle.net/u3448okL/

我在代码中添加了几个 cmets，看看我做了什么。请询问是否有任何不清楚的地方。

正确的代码是：

$( "#slider-range" ).slider({
  orientation: "vertical",
  range: true,
  min: 1,
    max: 5,
    values: [2,4],
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); 

    // Reset to previous colors (by removing .red class)
    $(".star-group").removeClass('red');

    // For each group of stars ...
    $(".star-group").each(function(){

        // ... check if the number of stars in this object is in the VALUES INTERVAL, then add class RED        
        if ($(this).find('i').length >= ui.values[0] && $(this).find('i').length <= ui.values[1]){
            $(this).addClass('red');
         }
     })
  }
});
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) );  

请注意，由于“安全”，我避免使用 nth-child()。我们本来可以用它来做的，但在我看来，上面的方法更安全。

请在此处阅读为什么 nth-child 可能很棘手：JQuery nth-child not working properly