Копировать по значению Javascript DOM объект

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

Я не уверен, что точно следую тому, что вы просите, но если вы хотите сохранить текущие настройки пользователя, вам следует сохранить фактическое состояние (например, количество звездочек), а нессылки на изображения, используемые в пользовательском интерфейсе.Итак, когда вы хотите сохранить состояние, просто посмотрите, сколько звездочек установлено, и сохраните это единственное число.Если вы хотите восстановить это состояние когда-нибудь в будущем, просто выполните цикл и установите правильное количество изображений, соответствующее этому числу.Это действительно должно работать намного лучше, чем сохранение ссылок на изображения.Еще одним преимуществом является то, что присвоение номеров всегда выполняется копией, поэтому вам не нужно беспокоиться о ссылках.

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, просто сохраните состояние и предоставьте метод для установки состояния на любое значение, которое вы хотите, либо пользователь выбрал одно, либо какое-либо ранее.