javascript - 如何在 jquery 插件中使用悬停事件？

Question

我正在制作一个简单的星级评分插件。但我在将 hover 事件放入此插件中时遇到问题。

jquery，

(function($){

    $.fn.extend({ 

        rater: function(options) {

            var defaults = {
            }

            var options =  $.extend(defaults, options);
            var o = options;

            var $this = this;

            $this.set_votes = function(object)
            {
                $(".replacement-radio",object).each(function(){

                    // Set variables.
                    var object = $(this);
                    var object_checked = object.attr('checked');

                    // Check if the object is checked.
                    if(object_checked === 'checked')
                    {
                        // Change stars.
                        $(this).next().prevAll('.button-star').andSelf().addClass('button-star-hover');
                        $(this).next().nextAll('.button-star').removeClass('button-star-hover'); 
                    }


                });

            }

            $('.button-star').hover(  
                // Handles the mouseover. 
                function() {  
                    $(this).prevAll('.button-star').andSelf().addClass('button-star-hover');  
                    $(this).nextAll('.button-star').removeClass('button-star-hover');  
                },  
                // Handles the mouseout . 
                function() {  
                    $(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');  
                    $this.set_votes($(this).parent());
                }  
            ); 

            // You must call return after declaring the functions.
            return this.each(function() {

                // Set the object.
                var object = $(this);
                //alert(object.html());

                // Check if the object is present.
                if(object.length > 0)
                {
                    // Hide the object and add the star after it.
                    object.hide();
                    object.after('<span class="button-star"></span>');

                    // Attached click event to the button which created after the object.
                    $('.button-star').click(function(){


                        // Set the value into the radio button.
                        var $this_check = $(this).prev().attr('checked', true);
                        var $this_value = $(this).prev().val();


                    });    
                }

            });

        }
    });

})(jQuery);​

我不确定如何在插件中实际调用/使用 hover 事件。因此，下面的悬停事件在我的星级评分插件中不起作用，

$('.button-star').hover(  
    // Handles the mouseover. 
    function() {  
        $(this).prevAll('.button-star').andSelf().addClass('button-star-hover');  
        $(this).nextAll('.button-star').removeClass('button-star-hover');  
    },  
    // Handles the mouseout . 
    function() {  
        $(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');  
        $this.set_votes($(this).parent());
    }  
); 

这是 jsfiddle link .

知道我应该如何让它发挥作用吗？

Answer 1

我的做法是这样的:

$(document).ready(function() {
    $(".replacement-radio").rater().binds();
});

(function($) {
    $.fn.extend({
        rater: function(options) {
            var $this = this,
                defaults = {}, 
                options = $.extend(defaults, options);

            $this.set_votes = function(object) {
                $(".replacement-radio", object).each(function(i,elm) {
                    if ($(elm).prop('checked')) {
                        $(elm).next().prevAll('.button-star').andSelf().addClass('button-star-hover');
                        $(elm).next().nextAll('.button-star').removeClass('button-star-hover');
                    }
                });
            }

            return this.each(function(i,elem) {
                if ($(elem).length) {
                    $(elem).hide().after('<span class="button-star"></span>');
                    $('.button-star').on('click', function() {
                        var $this_check = $(this).prev().prop('checked', true),
                            $this_value = $(this).prev().val();
                    });
                }
            });
        },
        binds: function() {
            $('.button-star').on({
                mouseenter: function() {
                    $(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
                    $(this).nextAll('.button-star').removeClass('button-star-hover');
                },
                mouseleave: function() {
                    $(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
                    $this.set_votes($(this).parent());
                }
            });
        }
    });
})(jQuery);​

FIDDLE

您似乎使用了很多不必要的变量，变量的名称相同，即使它们位于不同的范围内，但在同一个主函数中却很困惑。 此外，prop() 也是 checked 的正确方法。