Onclick函數JavaScript訪問數組Contentaing圖像名稱

我試圖創建一個簡單的函數，當您單擊縮略圖時更改大圖像。大圖像的名稱保存在兩個數組中。但是，不是插入正確的文件名，而是隻放入第一個字母。Onclick函數JavaScript訪問數組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> 
...

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

來源

2014-01-09 user3161409

首先，要傳遞的字符串，而不是實際的陣列。

它應該是：的

... 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"]; 
}

來源

2014-01-09 12:57:03 techfoobar

您也正在將圖像數組作爲本地範圍映射到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>

來源

2014-01-09 12:58:49

爲什麼只有第一個字母被插入的原因是因爲你的arrayName中是一個字符串，你只能插入字符串的第一個字符。另一個原因是你的數組不是全局的，所以你不能在你的函數中訪問它們。當你想訪問兩個數組中的一個時，只需使用switch/case或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>

來源

2014-01-09 13:15:24 exreplay

Onclick函數JavaScript訪問數組Contentaing圖像名稱

回答

相關問題