2

我正在制作一个简单的星级插件。但是我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链接。

知道我应该如何使它工作吗？

4

3 回答 3

2

这是我的做法：

$(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);​

小提琴

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

于 2012-10-09T14:03:55.440 回答
1

我认为你需要等到所有评估代码都被执行并且类“button-star”是动态添加的，如果你在该函数中运行处理程序代码，那么类还不存在，所以没有什么可以挂钩处理程序。

题外话：如果您的应用程序开始变得更大，可以看看 Backbone.js 或 Knockout.js，它们可以帮助您的代码更加面向对象且易于维护。

这是代码

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



(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'); 
                    }


                });

            }        

            // 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();


                    });    
                }

            });

        },
        AttachHandlers: function(){
            $('.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());
                }   
            ); 
        }
    });

})(jQuery);​

像这样将其作为单独的功能进行。

http://jsfiddle.net/RgBqh/9/

于 2012-10-09T13:52:14.193 回答
1

您将悬停事件附加到不存在的元素 - 您button-star在底部的 return 语句中创建跨度。

如果您将事件处理程序更改为通过 使用事件委托on()，它可以正常工作：

$(document).on('mouseenter', '.button-star', function() {
    $(this).prevAll('.button-star').andSelf().addClass('button-star-hover');  
    $(this).nextAll('.button-star').removeClass('button-star-hover');  
})
.on('mouseleave', '.button-star', function() {
    $(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');  
    $this.set_votes($(this).parent());
});

http://jsfiddle.net/jbabey/RgBqh/11/

于 2012-10-09T13:56:18.280 回答