Populating a five star system in JavaScript with half stars

I'm trying to figure out how to write a javascript function that takes an element + a score and uses jQuery `addClass` and `removeClass` to display the correct star rating (rounded to the nearest half star) but having problems... When I was using a "whole star" system I used something this system: function() { $(this).prevAll().andSelf().addClass('active'); $(this).nextAll().removeClass('active'); } Which no longer works for a half-star system. Does anyone have any advice? Here is the code I'm using now: function populateStars(stars, score) { // Stars refers to the
    container with
  • stars inside (see later code). // This function should use stars (container) and score (rating between 1-5) to display stars } This is an example of the
      elements that the "stars" var refers to:
      • 1
      • 2
      • 3
      • 4
      • 5
      And the CSS that controls whether the star is full, empty or half-full. .big-stars li { text-indent: -9999px; width: 49px; height: 46px; background: url('../images/big_star_empty.png'); } .big-stars .full { background: url('../images/big_star_full.png'); } .big-stars .half { background: url('../images/big_star_half.png'); }

以上就是Populating a five star system in JavaScript with half stars的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准