如何在 jquery 的 class nth-child() 中改变颜色？

Question

我想使用范围滑块 jquery ui 将评分筛选器设为星标，并将 class (.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

在此处查看已添加注释的经过测试的解决方案：https://jsfiddle.net/u3448okL/

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

正确的代码是：

$( "#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 ) );

请注意，由于 "safety"，我避免使用 nth-child()。我们本可以用它来完成，但我认为上面的方法更安全。

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

如何在 jquery 的 class nth-child() 中改变颜色？

How to change color in class nth-child() in jquery?

javascript

jquery

jquery-ui

rangeslider