値でコピーJavascript DOMオブジェクト

Question

私はJavaScriptを使用してユーザーの評価を可能にする星評価システムを作成しようとしています。私は、一般的にはかなりJavaScriptに新しいとプログラミングですが、ここで私がこれまで持っているものです：mClickRate（）関数で

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

       } 
      } 

     } 

が、私はそう電流源を保存したいです彼が再びクリックしなければ、ユーザーの選択肢を復元するために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に割り当てられたものと同じ配列への参照を割り当てます。つまり、両方の変数が同じ配列を参照します。あなたはどのような方法で使用してaryStoredImgにaryImgの要素をコピーする場合

、両方の配列は同じDOM要素への参照が含まれています。

jfriend00によると、状態を保存して、ユーザーが選択した値、以前にあった値のいずれかの値を状態に設定する方法を提供するだけです。