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。一番下の 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 に答える
1

すべての評価者コードが実行され、クラス「ボタンスター」が動的に追加されるまで待つ必要があると思います。その関数内でハンドラーコードを実行すると、クラスがまだ存在しないため、ハンドラーをフックするものは何もありません。

トピック外: アプリケーションが大きくなり始めた場合は、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 に答える