값으로 복사 Javascript DOM 객체

Question

사용자가 재평가 할 수있는 별표 평가 시스템을 자바 스크립트로 작성하려고합니다. 나는 일반적으로 매우 자바 스크립트에 새로운 프로그래밍,하지만 여기에 내가 지금까지 무엇을 가지고 다음 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이 말했듯이 상태를 저장하고 사용자가 원하는 값 (이전에 선택한 값)으로 상태를 설정하는 방법을 제공하기 만하면됩니다.