Question

我试图创建下面描述的功能：

我有5张星星图片。在服务器上，我决定应该在每个图像中显示哪种图像颜色。如果在服务器上计算的评级为3，则前三颗星为黄色，后两颗为灰色。

我想实现功能（使用jquery）。当用户悬停任何一颗星时，这一颗和之前的颜色变为红色（图像网址被更改），所有下一颗星都有灰色，但当光标离开星星时，那五颗星的状态应该像进入之前一样。

我写了类似这样的东西，但它并不好，并没有像我希望的那样真正地工作：

    var stars = {
    initStars: function initStars() {

      $('.starsHolder').hover(function() {
         this.star1ImageUrl = $(this).children('.star').eq(0).attr('src');
         this.star2ImageUrl = $(this).children('.star').eq(1).attr('src');
         this.star3ImageUrl = $(this).children('.star').eq(2).attr('src');
         this.star4ImageUrl = $(this).children('.star').eq(3).attr('src');
         this.star5ImageUrl = $(this).children('.star').eq(4).attr('src');
         $(this).children('.star').hover(function() { $(this).attr('src', '/star_red.png'); $(this).prevAll('.star').attr('src', '/star_red.png');}, function() { });
      }, function(){
         $(this).children('.star').eq(0).attr('src', this.star1ImageUrl);
         $(this).children('.star').eq(1).attr('src', this.star2ImageUrl);
         $(this).children('.star').eq(2).attr('src', this.star3ImageUrl);
         $(this).children('.star').eq(3).attr('src', this.star4ImageUrl);
         $(this).children('.star').eq(4).attr('src', this.star5ImageUrl);
         $(this).children('.star').unbind();
      })
    }
};

明星是asp：ImageButton这就是为什么我改变src属性但它并不重要。明星们与班级明星一起玩.Holder

感谢您提供任何帮助

Answer 1

有很多jQuery插件可以做到这一点。这里有几个。带你去挑选。

http://www.fyneworks.com/jquery/star-rating/

http://www.wbotelhos.com/raty/

http://orkans-tmp.22web.net/star_rating/

jquery星级评级控制

1 个答案: