将 JQuery 星级评定变为控制

Question

我有这个fiddle，它很酷，我第一次尝试创建 jquery 控件。很简单，只是一个星级控件。

我希望能够把它变成一个控件，这样我就可以调用：

$('#someDiv').starRating();

它会将这个 div 转换为星级。

我希望能够设置一些属性：

1. 空星源
2. 悬停星源
3. 星级（如果是新评级则留空）

所以它看起来像这样：

$('#someDiv').starRating({
    emptyStarSource : 'http://www.imageland.com/image.png',
    hoverStarSource : 'http://www.imageland.com/image.png',
    initialRating : 3
});

在如何更改选项等方面类似于 Datepicker。

如果有人能指出我正确的方向，那就太棒了！

编辑

所以我在得到的答案的帮助下试了一下。 img 点击事件不起作用，我猜想在将点击处理程序附加到页面后，我必须以某种方式附加它们。如何？之后，我只需要进行设置！

ratings control

Answer 1

要在 jQuery 中编写插件，请使用以下语法

$.fn.setRed = function(){
  return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
    var _obj = $(this);
    //work on the object here
    _obj.css("background-color", "red");
  });
}

然后你可以使用

$(".ratings").setRed();