jQuery addClass在循环内部不起作用

时间：2018-10-21 06:20:47

标签： javascript jquery

我在一个循环中有一个jQuery addClass函数，由于某种奇怪的原因，我似乎可以使用它，它应该将我的Font Awesome星星漆成金色。循环没有问题，我通过console.log进行了测试，以确认它是否循环了所有必需的整数。另外，addClass函数本身可以正常工作，我通过对eq选择器进行了硬编码对它进行了测试。但是当我将两者结合在一起时，它将停止工作。我无法进一步简化此功能以缩小问题的范围，并且在控制台上也没有看到针对此问题的任何记录。

$(".star").on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)
  var totalstars = $(".stars").children().length

    $(".golden").css("color","gold")

    // $(".star:eq(1)").addClass('golden');
      
    for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(".star:eq(i)").addClass('golden');
    }

})
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Star rating Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
  </head>

  <body>

    <h1>Star rating test</h1>

    <div class="stars">
      <i class="star fa fa-star fa-fw" title='Poor' data-value='1'></i>
      <i class="star fa fa-star fa-fw" title='Fair' data-value='2'></i>
      <i class="star fa fa-star fa-fw" title='Good' data-value='3'></i>
      <i class="star fa fa-star fa-fw" title='Excellent' data-value='4'></i>
      <i class="star fa fa-star fa-fw" title='WOW!!!' data-value='5'></i>
    </div>

  </body>
 
</html>

4 个答案:

答案 0 :(得分：3)

选择器i内部没有动态评估：

更改

$(".star:eq(i)").addClass('golden');

收件人

$('.star:eq('+i+')').addClass('golden');


$('.star').on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)
  var totalstars = $('.stars').children().length;
  
    //$('.golden').css("color",'gold')

    // $(".star:eq(1)").addClass('golden');

    for (let i = 0; i < starvalue; i++) {
      $('.star:eq('+i+')').addClass('golden');
    }

})
.golden {color: gold}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Star rating Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

</head>

  <body>

    <h1>Star rating test</h1>
    <div class="stars">
      <i class="star fa fa-star fa-fw" title='Poor' data-value='1'></i>
      <i class="star fa fa-star fa-fw" title='Fair' data-value='2'></i>
      <i class="star fa fa-star fa-fw" title='Good' data-value='3'></i>
      <i class="star fa fa-star fa-fw" title='Excellent' data-value='4'></i>
      <i class="star fa fa-star fa-fw" title='WOW!!!' data-value='5'></i>
    </div>

  </body>

</html>

或：：您可以使用允许嵌入表达式的Template literals (Template strings)。

$(`.star:eq(${i})`).addClass('golden');


$('.star').on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)
  var totalstars = $('.stars').children().length;
  
    //$('.golden').css("color",'gold')

    // $('.star:eq(1)').addClass('golden');

    for (let i = 0; i < starvalue; i++) {
      $(`.star:eq(${i})`).addClass('golden');
    }

})
.golden {color: gold}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Star rating Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

</head>

  <body>

    <h1>Star rating test</h1>
    <div class="stars">
      <i class="star fa fa-star fa-fw" title='Poor' data-value='1'></i>
      <i class="star fa fa-star fa-fw" title='Fair' data-value='2'></i>
      <i class="star fa fa-star fa-fw" title='Good' data-value='3'></i>
      <i class="star fa fa-star fa-fw" title='Excellent' data-value='4'></i>
      <i class="star fa fa-star fa-fw" title='WOW!!!' data-value='5'></i>
    </div>

  </body>

</html>

请注意：不要在CSS事件中设置颜色，而应使用CSS。另外，在代码中不必要地混合使用双引号和单引号也不是一个好习惯。

答案 1 :(得分：1)

问题不是循环（运行良好），而是i只是作为字符串而不是变量读取。使用变量的几个选择：

$('.star:eq("' + i + '")').addClass('golden');

或者您可以使用.eq 

$('.star').eq(i).addClass('golden');

完整的示例：

$(".star").on('click', function () {
  var starvalue = parseInt($(this).data('value'), 10)
  var totalstars = $(".stars").children().length;
  for (var i = 0; i < starvalue; i++) {
    $(".star").eq(i).addClass('golden');
  }
});
.golden { 
  color: yellow; 
}
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</head>
<body>
  <h1>Star rating test</h1>
  <div class="stars">
    <i class="star fa fa-star fa-fw" title='Poor' data-value='1'></i>
    <i class="star fa fa-star fa-fw" title='Fair' data-value='2'></i>
    <i class="star fa fa-star fa-fw" title='Good' data-value='3'></i>
    <i class="star fa fa-star fa-fw" title='Excellent' data-value='4'></i>
    <i class="star fa fa-star fa-fw" title='WOW!!!' data-value='5'></i>
  </div>
</body>
</html>

答案 2 :(得分：1)

尝试一下（我使用模板文字使所有内容更具可读性，请注意，这仅适用于ES6支持的浏览器）：

for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(`.star:eq(${i})`).addClass('golden');
      // Note that I have used backticks - ``
}

答案 3 :(得分：1)

使用下面的代码在此处添加类是小提琴link：

  $(".star").on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)

  var totalstars = $(".stars").children().length

   // $(".golden").css("color","gold")
    $(".star").removeClass('golden')
    // $(".star:eq(1)").addClass('golden');

    for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(".star:eq("+i+")").addClass('golden');
    }

})

此处的CSS代码：

.golden{
  color:#DAA520;
}

当您单击其他星号并使其与所需的相同时，它也会删除该类。

相关问题
最新问题