2014-01-09 1 views
0

축소판을 클릭하면 큰 이미지를 변경하는 간단한 함수를 만들려고합니다. 큰 이미지의 이름은 두 개의 배열로 유지됩니다. 그러나 올바른 파일 이름을 삽입하는 대신 첫 번째 문자 만 넣습니다.Onclick 함수 배열에 액세스하는 자바 스크립트 Contentaing 이미지 이름

arrayName [arrayOrder]는 전체 문자열이 될 것으로 예상 할 때 t 또는 m으로 평가되며 그 이유를 알 수 없습니다. 누구든지 도와 줄 수 있습니까?

HTML

<body onload="createImageArrays()"> 
    <div id="displayImage"> 
    <img src="images/tshirt1.jpg"> 
    </div> 
    <div id ="thumbnails"> 
    <img src="images/tshirtthumb1.jpg" onclick="imageSwap('tshirtArray', 0)"> 
    <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap('modelArray',0)"> 
    </div> 
... 

JS

function imageSwap(imageArrayName, imageArrayNumber){ 
    var oldImage = document.getElementById('displayImage'); 
    var arrayOrder = imageArrayNumber; 
    var arrayName = imageArrayName; 
    //var newImage = arrayName[arrayOrder]; 
    oldImage.innerHTML='<img src="images/' + arrayName[arrayOrder] +'"</img>'; 
    window.alert('arrayName[arrayOrder]'); 
} 

function createImageArrays(){ 
    var tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"]; 
    var modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"]; 
}; 

답변

1

첫째 대신 실제 배열의 문자열을 전달하고 있습니다.

그것은해야한다 :

... onclick="imageSwap(tshirtArray, 0)" 
... onclick="imageSwap(modelArray,0)" 

대신 둘째

... onclick="imageSwap('tshirtArray', 0)" 
... onclick="imageSwap('modelArray',0) 

의, 당신의 배열은 생성되는 함수에 지역이다. 외부로 이동할 수 있도록 그들을 밖으로 이동하십시오.

var tshirtArray, modelArray; 
function createImageArrays(){ 
    tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"]; 
    modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"]; 
} 
0

또한 이미지 배열을 createImageArrays()에 로컬로 범위 지정합니다. 범위들이 전 세계적으로 (정말 최고,하지만 ...)과, imageSwap에서 그들을 참조하지 이름 :

<body onload="createImageArrays()"> 
<div id="displayImage"> 
    <img src="images/tshirt1.jpg"> 
</div> 
<div id ="thumbnails"> 
    <img src="images/tshirtthumb1.jpg" onclick="imageSwap(tshirtArray, 0)"> 
    <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap(modelArray,0)"> 
</div> 

<script> 

function imageSwap(imageArrayName, imageArrayNumber){ 
    var oldImage = document.getElementById('displayImage'); 
    var arrayOrder = imageArrayNumber; 
    var arrayName = imageArrayName; 
    //var newImage = arrayName[arrayOrder]; 
    oldImage.innerHTML='<img src="images/' + arrayName[arrayOrder] +'"</img>'; 

    window.alert('arrayName[arrayOrder]'); 
} 

function createImageArrays(){ 
    tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"]; 
    modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"]; 
}; 
</script> 
0

첫 번째 문자가 삽입되는 이유는 당신의 arrayName이 문자열 때문에 문자열의 첫 번째 문자 만 삽입합니다. 또 다른 이유는 배열이 전역이 아니므로 함수에서 액세스 할 수 없기 때문입니다. 두 배열 중 하나에 액세스하려면 스위치/대/소문자 if/elseif 조건을 사용하여 어떤 배열을 사용해야하는지 확인하십시오. 희망 사항 :

<body onload="createImageArrays()"> 
    <div id="displayImage"> 
     <img src="images/tshirt1.jpg"> 
    </div> 
    <div id ="thumbnails"> 
     <img src="images/tshirtthumb1.jpg" onclick="imageSwap('tshirtArray', 0)"> 
     <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap('modelArray',0)"> 
    </div> 

    <script type="text/javascript"> 
     var tshirtArray; 
     var modelArray; 

     function imageSwap(imageArrayName, imageArrayNumber){ 
      var oldImage = document.getElementById('displayImage'); 
      var imageName; 
      if(imageArrayName == "tshirtArray") 
       imageName = tshirtArray[imageArrayNumber]; 
      else if(imageArrayName == "modelArray") 
       imageName = modelArray[imageArrayNumber]; 

      //var newImage = arrayName[arrayOrder]; 
      oldImage.innerHTML='<img src="images/' + imageName +'"</img>'; 

      window.alert('arrayName[arrayOrder]'); 
     } 

     function createImageArrays(){ 
      tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"]; 
      modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"]; 
     }; 
    </script> 
</body> 
관련 문제