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

在这里查看已添加评论的测试解决方案：https://jsfiddle.net/u3448okL/

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

正确的代码是：

{{1}}

请注意，由于“安全”，我避免使用nth-child（）。我们本可以用它完成它，但在我看来，它比上面的方式更安全。

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

如何在jquery中更改类nth-child（）中的颜色？

1 个答案: