个回答

• 慕慕3942110

  2019-11-24 08:49:15

  https://typescript-zjhw7c.stackblitz.io

  0

• 慕移动4036559

  2019-02-24 16:17:09

  TypeScript代码可以吗?

  /**
  * 星级评分条类
  *
  * @class RatingBar
  */
  class RatingBar
  {
  /**
      * 默认设置
      *
      * @static
      * @memberof RatingBar
      */
  public static readonly defaults = {
  mode: "LightEntire",
  maxStar: 5,
  star: 0,
  OnSelect: () => { },
  OnChosen: () => { },
  };
  public readonly mode = {
  "LightEntire": this.LightEntire,
  "LightHalf": this.LightHalf,
  }
  el: JQuery<HTMLElement>;
  options: {
  mode?: string, maxStar?: number, star?: number, OnSelect?: () => void, OnChosen?: () => void,
  };
  constructor(el: JQuery<HTMLElement>, options: { mode?: string, maxStar?: number, star?: number, OnSelect?: () => void, OnChosen?: () => void, })
  {
  options = $.extend({}, RatingBar.defaults, options);
  options.mode = (!this.mode[options.mode]) ? "LightEntire" : options.mode;
  options.mode = (options.star != Math.floor(options.star)) ? "LightHalf" : options.mode;
  this.el = el;
  this.options = options;
  //初始化星星显示
  this.LightHalf(options.star);
  //绑定事件
  this.BindEvent();
  }
  /**
      * 绑定事件
      *
      * @memberof RatingBar
      */
  public BindEvent()
  {
  this.el.on("mousemove", ".rating_item", (e) =>
  {
  this.OnMouseMove(e);
  });
  this.el.on("click", ".rating_item", (e) =>
  {
  this.OnClick(e);
  });
  this.el.on("mouseout", ".rating_item", (e) =>
  {
  this.OnMouseOut(e);
  });
  }
  /**
      * 清除绑定事件
      *
      * @memberof RatingBar
      */
  public UnbindEvent()
  {
  this.el.off("mousemove");
  this.el.off("click");
  this.el.off("mouseout");
  }
  /**
      * 点亮整颗星星
      *
      * @param {number} num 要点亮的星星数目
      * @memberof RatingBar
      */
  public LightEntire(num: number)
  {
  num = Math.floor(num); //防止传入的数不是整数
  let item = this.el.find(".rating_item");
  item.each(function(i)
  {
  item.eq(i).removeClass("show_half"); //清除半颗星
  if (i < num)
  {
  item.eq(i).addClass("show_entire");
  }
  else
  {
  item.eq(i).removeClass("show_entire");
  }
  });
  }
  /**
      * 点亮半颗星星
      *
      * @param {number} num 要点亮的星星数目
      * @memberof RatingBar
      */
  public LightHalf(num: number)
  {
  let count: number = Math.floor(num);
  let isHalf: boolean = count !== num; //是否选择半颗
  let item = this.el.find(".rating_item");
  item.each((i) =>
  {
  this.LightEntire(count);
  if (isHalf)
  {
  item.eq(count).addClass("show_half");
  }
  });
  }
  private OnMouseMove(e: JQuery.MouseMoveEvent<HTMLElement, undefined, any, any>)
  {
  let $self = $(e.currentTarget);
  let num: number;
  if (e.pageX - $self.offset().left < $self.width() / 2 && this.options.mode == "LightHalf") //半颗
  {
  num = $self.index() + 0.5;
  }
  else //整颗
  {
  num = $self.index() + 1;
  }
  this.LightHalf(num);
  this.options.OnSelect();
  }
  private OnClick(e: JQuery.ClickEvent<HTMLElement, undefined, any, any>)
  {
  let $self = $(e.currentTarget);
  let num: number;
  if (e.pageX - $self.offset().left < $self.width() / 2 && this.options.mode == "LightHalf") //半颗
  {
  num = $self.index() + 0.5;
  }
  else //整颗
  {
  num = $self.index() + 1;
  }
  this.options.star = num;
  this.options.OnChosen();
  }
  private OnMouseOut(e: JQuery.MouseOutEvent<HTMLElement, undefined, any, any>)
  {
  this.LightHalf(this.options.star);
  }
  }
  let r1 = new RatingBar($("#r1"), {
  OnSelect: () =>
  {
  console.log("select");
  },
  OnChosen: () =>
  {
  r1.UnbindEvent();
  }
  });

  
  

  0

• 精慕门2474322

  2017-06-05 18:07:46

  jq也就那么几句，自己改一改呗

  0

• ThinkSummer

  2017-06-02 09:38:27

  自己写吧，思路都有了，差别不是太大。

  0

• Magic灬先森

  2017-06-01 16:19:11

  没有源码 手打的可以吗 功能都实现了

  1