Question

我正在尝试用javascript编写星级评分系统，允许用户重新评估（这是一个单词？）。我对Javascript和编程一般都很陌生，但到目前为止我还是这样：

<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";

                }
            }

        }

在mClickRate（）函数中，我想存储当前源，以便我可以在mOutRate（）函数中调用它，以便在用户不再次单击时恢复用户的选择。然而，经过一些研究（好的很多研究）我发现我的新阵列指向相同的参考。

我已经尝试过使用array.splice，我也试过使用一个没有运气的循环。如果任何人有任何帮助提供复制这种类型的数组值而不是参考或建议如何使我的脚本更好，请告诉我。

哦，我说过我是初学者（回复时请记住这一点）？提前谢谢。

Answer 1

我不确定我是否正在按照您的要求进行操作，但如果您要执行的操作是保存当前用户的设置，那么您应该保存实际状态（例如星数），而不是UI中使用的图像引用。因此，当您想保存状态时，只需查看设置的星数并保存该单个数字。如果要在将来的某个时间恢复该状态，只需循环并设置正确数量的图像以匹配该数字。这真的应该比保存图像引用更好。另一个优点是，总是通过复制来分配数字，因此您不必担心引用。

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"));

使用数组文字和一些更整洁的格式可以写得更清楚：

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 声明变量，但这里不会产生显着差异。

赋值分配对刚刚分配给 aryImg 的同一个数组的引用，即两个变量引用相同的数组。

如果使用任何方法将 aryImg 的元素复制到 aryStoredImg ，则两个数组都将包含对相同DOM元素的引用。

正如jfriend00所说，只需存储状态并提供一种方法将状态设置为您想要的任何值，用户可以选择一个或之前的任何值。

按值Javascript DOM对象复制

2 个答案: