javascript - jQuery:使用 .find 和 .addClass

Question

我正在使用 Ajax 从 JSON 文件输入一些数据。一切都插入正常，除了我想添加类 'checked'达到一定数量<span>取决于 JSON 文件中设置的评级。 (例如，一部评分为 3 的电影会将类 'checked' 添加到前 3 个 span 中)。

这是我到目前为止的 JS，只是想让它以 3 的评级工作:

$(document).ready(function(){
   $.getJSON("data/films.json",function(films){
       $.each(films, function(index,film){
            var $newLi = $('<div class="film"><img class="pure-u-2-5" src='+film.img+'/><div class="pure-u-2-5"><ul><li><b>Title:</b> '+film.title+'</li><li><b>Genre:</b> '+film.genre+'</li><li><b>Director:</b> '+film.director+'</li><li><b>Release Date:</b> '+film.release+'</li><div class="star"><span class="star1 fa fa-star"></span> <span class="star2 fa fa-star"></span> <span class="star3 fa fa-star"></span> <span class="star4 fa fa-star"></span> <span class="star5 fa fa-star"></span></div></div>');

            if (film.rating===3){
                $(".star").find("star1").addClass("checked");
                $(".star").find("star2").addClass("checked");
                $(".star").find("star3").addClass("checked");
            }

            $(".showFilm").append($newLi);

            })

       });

       }) ;

问题

检查的类应该更改范围的颜色，但它没有这样做。

Answer 1

您有多个问题:

1. 问题是您选择了页面上的所有星星
2. 您实际尝试选择的星星尚未添加到 DOM
3. 您的类选择器缺少 。

因此您可以选择 jQuery 对象中的元素并修复您的选择器

var $newLi = $('<div class="film"><img class="pure-u-2-5" src='+film.img+'/><div class="pure-u-2-5"><ul><li><b>Title:</b> '+film.title+'</li><li><b>Genre:</b> '+film.genre+'</li><li><b>Director:</b> '+film.director+'</li><li><b>Release Date:</b> '+film.release+'</li><div class="star"><span class="star1 fa fa-star"></span> <span class="star2 fa fa-star"></span> <span class="star3 fa fa-star"></span> <span class="star4 fa fa-star"></span> <span class="star5 fa fa-star"></span></div></div>');

if (film.rating===3){
  $newLi.find(".star .star1").addClass("checked");
  $newLi.find(".star .star2").addClass("checked");
  $newLi.find(".star .star3").addClass("checked");
}

$(".showFilm").append($newLi);

如何改进？不要选择每个类并且也有多个 if ，而是根据计数将类添加到组中。

$newLi.find(".star .fa-star").slice(0, film.rating-1).addClass("checked");