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

您有多个问题：

问题是你正在选择页面上的所有星星
您实际尝试选择的星星尚未添加到DOM
您的班级选择器缺少.

因此，您可以选择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);

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

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

Answer 2

film.rating可能是一个字符串，您试图将其与这样的数字进行比较：

if (film.rating===3)

有几种解决方案：

使用双等号，将film.rating视为比较数字：

if（film.rating == 3）
通过添加加号明确地将film.rating转换为数字：

if（+ film.rating == 3）

另请注意，在任何类名（例如star1）之前需要一段时间。变化：

$(".star").find("star1").addClass("checked");
$(".star").find("star2").addClass("checked");
$(".star").find("star3").addClass("checked");

......来：

$(".star").find(".star1").addClass("checked");
$(".star").find(".star2").addClass("checked");
$(".star").find(".star3").addClass("checked");

Answer 3

它未经测试但应该正常工作

function makeFilmHTML (film) {
    var rating = film.rating;
    var html = [
    '<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>',
        '</ul>',
      '</div>',
      '<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>'
  ].join('');

  html = $(html);
  html.find('.star > .fa-star:lt('+ rating +')').addClass('checked');

  return html;
}

$(document).ready(function(){
   $.getJSON("data/films.json",function(films){
       $.each(films, function(index,film){
            var $filmHTML = makeFilmHTML(film);

            $(".showFilm").append($filmHTML);
       });
   });
}) ;

jQuery：使用.find和.addClass

问题

3 个答案: