Question

我正在尝试创建一个简单的函数，在您单击缩略图时更改大图像。大图像的名称保存在两个数组中。但是，它不是插入正确的文件名，而是只放置第一个字母。

当我希望它是完整的字符串时，

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

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

Answer 2

您还将图像数组作为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>

Answer 3

仅插入第一个字母的原因是因为 arrayName 是一个字符串而您只插入字符串的第一个字符。另一个原因是您的数组不是全局数组，因此不允许您在函数中访问它们。当你想访问两个数组中的一个时，只需使用一个switch / case oder 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>

Onclick函数Javascript访问数组Contentaing图像名称

3 个答案: