按價值複製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

我不確定我是否正在遵循你所要求的內容，但是如果你想要做的是保存當前用戶的設置，那麼你應該保存實際狀態（例如星號），不是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所說，只需存儲狀態並提供一種方法，將狀態設置爲所需的任何值，無論是用戶選擇的還是之前的任何值。