1

スターベースのランキング/投票に役立つ次のjQuery関数があります。それはうまく機能し、チュートリアルから例を取得しました。ユーザーが星を選択すると、数値がサーバー側に保存され、戻ってくると、星の数は「灰色」ではなく「黄色」になります。唯一の欠点は、投票後に戻って星の上にカーソルを置き始めると、選択した元の星が「黄色」のままではなく、グレー表示されることです.

これが私のコードです。その長寿をお詫び申し上げます。

        (function ($) {
            $.fn.starFunction = function (stars, initialRating) {
                //Save  the jQuery object for later use.
                var elements = this;

                //Go through each object in the selector and create a ratings control.
                return this.each(function () {

                    //Make sure intialRating is set.

                    if (!initialRating)
                        initialRating = 0;

                    //Save the current element for later use.
                    var containerElement = this;

                    //grab the jQuery object for the current container div
                    var container = jQuery(this);

                    //Create an array of stars so they can be referenced again.
                    var starsCollection = Array();

                    //Save the initial rating.
                    containerElement.rating = initialRating;

                    //Set the container div's overflow to auto.  This ensure it will                      grow to
                    //hold all of its children.
                    container.css('overflow', 'auto');

                    //create each star
                    for (var starIdx = 0; starIdx < stars; starIdx++) {

                        //Create a div to hold the star.
                        var starElement = document.createElement('div');

                        //Get a jQuery object for this star.
                        var star = jQuery(starElement);

                        //Store the rating that represents this star.
                        starElement.rating = starIdx + 1;

                        //Add the style.
                        star.addClass('jquery-ratings-star');

                        //Add the full css class if the star is beneath the initial rating.
                        if (starIdx < initialRating) {
                            star.addClass('jquery-ratings-full');
                        }

                        //add the star to the container
                        container.append(star);
                        starsCollection.push(star);

                        //hook up the click event
                        star.click(function () {
                            //When clicked, fire the 'ratingchanged' event handler.  Pass the rating through as the data argument.
                            elements.triggerHandler("ratingchanged", { rating: this.rating });
                            containerElement.rating = this.rating;
                        });

                        star.mouseenter(function () {
                            //Highlight selected stars.
                            for (var index = 0; index < this.rating; index++) {
                                starsCollection[index].addClass('jquery-ratings-full');
                            }
                            //Unhighlight unselected stars.
                            for (var index = this.rating; index < stars; index++) {
                                starsCollection[index].removeClass('jquery-ratings-full');
                            }
                        });

                        container.mouseleave(function () {
                            //Highlight selected stars.
                            for (var index = 0; index < containerElement.rating; index++) {
                                starsCollection[index].addClass('jquery-ratings-full');
                            }
                            //Unhighlight unselected stars.
                            for (var index = containerElement.rating; index < stars ; index++) {
                                starsCollection[index].removeClass('jquery-ratings-full');
                            }
                        });
                    }
                });
            };
        })(jQuery);
4

1 に答える 1