Question

我使用完全正常运行的HTML和Javascript开发了以下代码块：

<html>
   <body>
      <img id="img0" style="position:fixed; width:116px; height:100px;" >
      <img id="img1" style="position:fixed; width:116px; height:100px;" >
      <img id="img2" style="position:fixed; width:116px; height:100px;" >
      <img id="img3" style="position:fixed; width:116px; height:100px;" >

      <script>
         let rightArray = [300, 213, 387, 300 ];
         let bottomArray = [300, 350, 350, 200];
         let imageArray = ['image1.png', 'image2.png', 'image3.png', 'image4.png'];

         const img0 = document.querySelector('#img0');
         img0.style.right = rightArray[0] + "px";
         img0.style.bottom = bottomArray[0] + "px";
         img0.src = imageArray[0];

         const img1 = document.querySelector('#img1');
         img1.style.right = rightArray[1] + "px";
         img1.style.bottom = bottomArray[1] + "px";
         img1.src = imageArray[1];

         const img2 = document.querySelector('#img2');
         img2.style.right = rightArray[2] + "px";
         img2.style.bottom = bottomArray[2] + "px";
         img2.src = imageArray[2];

         const img3 = document.querySelector('#img3');
         img3.style.right = rightArray[3] + "px";
         img3.style.bottom = bottomArray[3] + "px";
         img3.src = imageArray[3];

      </script>
   </body>
</html>

基本上它以下列模式组织一些六边形图像：

正如我们在代码中看到的，一切都是非常重复的，在循环中创建这些代码会更方便。但我需要一种方法将img tag置于循环中以实现此目的。我想要做的伪代码是这样的：

<html>
   <body>
      for(let i=0; i<4; i++)
      {
      <img id="img[i]" style="position:fixed; width:116px; height:100px;" >
      }

      <script>
         let rightArray = [300, 213, 387, 300 ];
         let bottomArray = [300, 350, 350, 200];
         let imageArray = ['image1.png', 'image2.png', 'image3.png', 'image4.png'];
         let objectNameArray = ['img0', 'img1', 'img2', 'img3'];

      for(let i=0; i<4; i++)
      {
         const objectNameArray[i] = document.querySelector('#' + objectNameArray[i]);
         objectNameArray[i].style.right = rightArray[i] + "px";
         objectNameArray[i].style.bottom = bottomArray[i] + "px";
         objectNameArray[i].src = imageArray[i];
      }
      </script>

   </body>
</html>

我100％确定最后一个代码不起作用，第一个循环是完全错误的，第二个循环是我们无法以我在那里的方式声明和使用对象。所以，基本上我有两个疑问：

是否可以将img标记放在循环中，这样当我使用Javascript处理其参数时，我不需要复制很多次？
是否可以声明和使用通过循环交互创建的不同对象？

这些问题出现在我脑海中只是因为我想优化我在这里发布的第一个代码块...我不确定我想做什么是可能的，或者我是否想要在正确的方式。因此，我对以不同方式做同样事情的不同观点持开放态度。谢谢！

Answer 1

您可以将必要的数据放入数组中，然后遍历数组，而不是使用id：

＆＃13;

const data = [
  { right: 100, bottom: 100, url: 'https://i.stack.imgur.com/SjeyK.jpg?s=32&g=1'},
  { right: 20, bottom: 20, url: 'image2.png'},
  { right: 387, bottom: 350, url: 'image3.png'},
  { right: 300, bottom: 200, url: 'image4.png'},
];
data.forEach(({ right, bottom, url }) => {
  const img = document.body.appendChild(document.createElement('img'));
  img.src = url;
  img.style.right = right + 'px';
  img.style.bottom = bottom + 'px';
});

＆＃13;

img {
  position:fixed; width:116px; height:100px;
}

＆＃13;

但是，如果这是您的选项，那么仅在CSS中设置这些属性会更好。

Answer 2

这样做：

＆＃13;

/* I changed the bottomArray values so that the images are visible in the following code snippet */
var rightArray = [300, 213, 387, 300 ],
    bottomArray = [100, 150, 150, 0],
    imageArray = [ 'gbwzdT/image1.png', 'mrWAk8/image2.png', 'f6qQJT/image3.png', 'cunGQ8/image4.png' ];

for ( var i = 0; i < 4; i++ ) {
    var element = document.createElement( 'img' );

    element.id = 'img' + i;
    element.style.cssText = 'position:fixed; width:116px; height:100px; right: ' + rightArray[ i ] + 'px; bottom: ' + bottomArray[ i ] + 'px';
    element.src = 'https://image.ibb.co/' + imageArray[ i ];
    document.body.appendChild( element )
}

＆＃13;

是否可以使用Javascript循环img标记的id属性？

2 个答案: