Question

I am trying to write a star rating system in javascript that allows the user to rerate (is that a word?). I am quite new to Javascript and programming in general, but here is what I have so far:

<div id="rateMe" title="Rate Me...">
     <a><img id="star1" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);"
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a ><img id="star2" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star3" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star4" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star5" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);"
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>


     <label id="info0"></label>
     <label id="info1"></label>
     <label id="info2"></label>
     <label id="info3"></label> 
     <label id="info4"></label>
</div>



<script type="text/javascript">
        var Rated = false;

        // Declare an array that holds refers to the star img objects
        var aryImg = new Array(document.getElementById("star1"), document.getElementById("star2"), 
            document.getElementById("star3"), document.getElementById("star4"),
            document.getElementById("star5"));

        // Decare an array that will be used to store the star rating
        // when a user clicks and chooses a rating
        aryStoredImg = aryImg;




        function mOverRate(that)
        {

            var myImg = that;

            // Changes the star image to filled (and any images to the right
            // of it) if the mouse is hovering over it
            switch (myImg.id)
            {
                case "star1":
                    aryImg[0].src = "star_filled.png";
                    break;
                case "star2":
                    for (var i = 0; i <= 1; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star3":
                    for (var i = 0; i <= 2; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star4":
                    for (var i = 0; i <= 3; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star5":
                    for (var i = 0; i <= 4; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
            }

        }


        function mClickRate(that)
        {

            // This attempts to store the state of the imgs
            // after the user clicks a star
            for (var i = 0; i < aryImg.length; i++)
            {
                aryStoredImg[i].src = aryImg[i].src;
            }

            Rated = true;
        }




        function mOutRate(that)
        {
            var myImg = that;

            if (Rated)
            {
                // This replaces the images displayed with the
                // images that were stored at the time the user
                // clicked on a star
                for (var i = 0; i < aryImg.length; i++)
                {

                    aryImg[i].src = aryStoredImg[i].src;

                }
            }
            else
            {
                // This resets all of the images after the mouse
                // out event
                for (var i = 0; i < aryImg.length; i++)
                { 
                    aryImg[i].src = "star_empty.png";

                }
            }

        }

In the mClickRate() function I wanted to store the current source so that I could recall it in the mOutRate() function to restore the user s choice if he does not click again. However, after a little research (okay a lot of research) I found out that my new array was pointing to the same reference.

我尝试使用这些阵列。冰.,我也尝试使用一只没有uck子的通道。如果任何人在以价值复制这种阵列方面有任何帮助,而不是就如何改进我的文字提供参考或建议,请让我知道。

Oh, and did I said I was a beginner (Please keep that in mind when responding)? Thanks in advance.

Answer 1

我不敢肯定我会完全听从你要求的话,但如果你想要做的是拯救目前的用户环境,那么你就应当拯救实际状态(例如星体的数量),而不是在德国马克中使用的图像。因此,当你想挽救国家时,看看有多少星座,并拯救了该星号。如果你希望在今后某个时候恢复这一状态,那么你就只能穿透和确定适当的图像数量,以便与这一数字相匹配。这确实应该比挽救图像的工作做得更好。另一种好处是,指派人数总是复印件,因此你不必担心提及。

Answer 2

> // Declare an array that holds refers to the star img objects var
> aryImg = new Array(document.getElementById("star1"), document.getElementById("star2"), 
>             document.getElementById("star3"), document.getElementById("star4"),
>             document.getElementById("star5"));

That can be written a little clearer using an array literal and some neater formatting:

var aryImg = [
              document.getElementById("star1"), 
              document.getElementById("star2"), 
              document.getElementById("star3"),
              document.getElementById("star4"),
              document.getElementById("star5")
             ];

.

> // Decare an array that will be used to store the star rating // when
> a user clicks and chooses a rating 
> aryStoredImg = aryImg;

您应宣布使用var<>m>的变量,但在这方面却取得了一定的进展。

The assignment assigns a reference to the same array as was just assigned to aryImg, i.e. both variables reference the same array.

If you copy the elements of aryImg to aryStoredImg using whatever method, then both arrays will contain references to the same DOM elements.

正如jer00所说,仅仅储存国家,并提供一种方法,使国家达到你想要达到的任何价值,无论是用户选择的还是以前选择的。

友情链接