Question

我正在尝试使用for循环将图像（目前有7张图像）插入到数组中，并在滚动条中预览（显示）这些图像。单击时滚动条上的特定图像应出现在给定的div中（应扩展为div的大小）这是给证书生成器的

到目前为止我尝试过的此js代码enter image description here

// var div = document.createElement("div");
// div.style.width = "300px";
// div.style.height = "300px";
// div.style.background = "red";
// document.getElementById("con").appendChild(div);
var image=  
[
  "themes/theme1.jpg",
  "themes/theme2.jpg",
  "themes/theme3.jpg",
  "themes/theme4.jpg",
  "themes/theme5.jpg",
  "themes/theme6.jpg",
  "themes/theme7.jpg"
];
var arrayLength=image.length;
var i;
var div = document.getElementById("main");
for (i =0;i<arrayLength;i++)
{
  var img=document.createElement("img");
  img.setAttribute("src",image[i]);
  img.setAttribute("width","100");
  img.setAttribute("height","100");
  img.addEventListener('click', function click(event) {
    console.log(img);
    document.getElementById('expandedImage').appendChild(img);
  },false);
  div.appendChild(img);
  // img = null;
}
// function myFunction(img) {
//   var expandImg = document.getElementById("expandedImg");
//   var main = document.getElementById("main");
//   expandImg.src = img.src;
//   expandImg.parentElement.style.display = "block";
// }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src='index.css'>
</head>
<body>
  <div id="expandedImage" style="width:800px; height:500px;float:left; 
border: 1px solid black">
  </div>
  <!-- <div id="con"></div> -->
  <div id="main" style="width:150px; height: 500px; overflow-y: 
scroll;float:right"> 
  </div>
  <script src="index.js"></script>
</body
</html>

我希望输出是我单击的图像，但实际输出是阵列的第7张图像

Answer 1

您正在传递img变量，而您的img变量最后一次创建了img元素。

代替img document.getElementById('expandedImage').appendChild(img);

通过this附加点击image。

document.getElementById('expandedImage').appendChild(this);

var image = [
  "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg",
  "themes/theme2.jpg",
  "themes/theme3.jpg",
  "themes/theme4.jpg"
];
var arrayLength = image.length;
var i;
var div = document.getElementById("main");
for (i = 0; i < arrayLength; i++) {
  var img = document.createElement("img");
  img.setAttribute("src", image[i]);
  img.setAttribute("width", "100");
  img.setAttribute("height", "100");
  img.addEventListener('click', function click(event) {
    document.getElementById('expandedImage').appendChild(this);
  }, false);
  div.appendChild(img);
  // img = null;
}

<div id="expandedImage" style="width:800px; height:500px;float:left; 
        border: 1px solid black">
</div>
<!-- <div id="con"></div> -->
<div id="main" style="width:150px; height: 500px; overflow-y: 
        scroll;float:right">
</div>

Answer 2

为什么不向expandedImage div附加新的孩子，为什么不在ID为expandedImage的扩展图像div中创建新的图像标签并更改其src单击每个图像滚动条上的图像。

希望这会有所帮助。

这里在工作JSFiddle link

// var div = document.createElement("div");
// div.style.width = "300px";
// div.style.height = "300px";
// div.style.background = "red";
// document.getElementById("con").appendChild(div);
var image=  
[ 
  "https://www.technology-solved.com/wp-content/uploads/2019/03/password-best-practices-image.png",
  "https://mycomputerexperts.net/wp-content/uploads/2018/04/webbrowsing.jpg",
  "https://www.royaloakindia.com/uploads/ROYIND-royaloak-amber-computer-table-small-800x50072.jpg"
];
var arrayLength=image.length;
var i;
var div = document.getElementById("main");
for (let i =0;i<arrayLength;i++)
{
  var img=document.createElement("img");
  img.setAttribute("src",image[i]);
  img.setAttribute("width","100");
  img.setAttribute("height","100");
  img.addEventListener('click', function click(event) {
    // console.log(img);
    document.getElementById('expandedImage').src = image[i];
  },false);
  div.appendChild(img);
  // img = null;
}

// Default image
document.getElementById('expandedImage').src = image[0];


// function myFunction(img) {
//   var expandImg = document.getElementById("expandedImg");
//   var main = document.getElementById("main");
//   expandImg.src = img.src;
//   expandImg.parentElement.style.display = "block";
// }

#expandedWrapper {
  width: 100vw;
  max-width: 800px;
  max-height: 500px;
  border: 1px solid black;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src='index.css'>
</head>
<body>
  <div id="expandedWrapper">
    <img id="expandedImage" src="">
  </div>
  <!-- <div id="con"></div> -->
  <div id="main" style="width:150px; height: 500px; overflow-y: 
scroll;float:right"> 
  </div>
  <script src="index.js"></script>
</body
</html>

Answer 3

之所以出现此问题，是因为JS有一个名为“ ho积”的东西。基本上，如果你这样写：

if (true) {
    var x = 4;
}

变成这样：

var x;
if (true) {
    x = 4;
}

要解决此问题，您可以使用let的{{1}}

var

// var div = document.createElement("div");
// div.style.width = "300px";
// div.style.height = "300px";
// div.style.background = "red";
// document.getElementById("con").appendChild(div);
var image=  
[
  "themes/theme1.jpg",
  "themes/theme2.jpg",
  "themes/theme3.jpg",
  "themes/theme4.jpg",
  "themes/theme5.jpg",
  "themes/theme6.jpg",
  "themes/theme7.jpg"
];
var arrayLength=image.length;
var i;
var div = document.getElementById("main");
for (i =0;i<arrayLength;i++)
{
  let img=document.createElement("img");
  img.setAttribute("src",image[i]);
  img.setAttribute("width","100");
  img.setAttribute("height","100");
  img.addEventListener('click', function click(event) {
    console.log(img);
    document.getElementById('expandedImage').appendChild(img);
  },false);
  div.appendChild(img);
  // img = null;
}
// function myFunction(img) {
//   var expandImg = document.getElementById("expandedImg");
//   var main = document.getElementById("main");
//   expandImg.src = img.src;
//   expandImg.parentElement.style.display = "block";
// }

如何克服JavaScript中图像数组中的错误

3 个答案: