Question

任何人都可以如此友好地指导我自己以及其他许多来到这里寻求解决方案的人提出建议，请问这个问题吗？

我已经设法为src和图像创建了一个数组，但我找不到将ID数组附加到IMG的ID标签的方法，即HTML。即img id =＆＃34; foo＆＃34; src =＆＃34; bar＆＃34;等。我希望有一个n数组的ID。

我希望开始编码干，我一直在观看许多视频和教程，并设法实现这一目标......

<html>
<body>

<var x=0; x<10; x++1>
<img id="0" src="cicons1.png" style="position:absolute;">



<script>

var i=0

function setup() {
document.getElementById([i]).style = ("position:absolute; left:"+[i*100+100]+"px;" )
document.getElementById([i]).src="Cicons"+[i]+".png";

console.log([i])
}
for (var i=0; i<10; i=i+1) { setup();
}
</script>

</body>
</html>

但我希望有一个ID数组，所以我不必重复图像标记一遍又一遍地。因为我正在处理超过60多个图标和图像以及文字标题。所以有一个DRY方法是理想的，而且我自己也很难提供解决方案，所以现在我必须转向专家......

所以，如果你有解决方案，我会提前感谢你。

https://ibb.co/ifGcKk

Answer 1

请注意，确实有很多方法可以完成这样的任务，这只是一个例子：

＆＃13;

<html>
<body>
<div id="iconContainer"></div>
<div id="icoSelected" style="position: absolute; top: 120px;">Selected: -none-</div>
<script>
  function showSelected() {
    document.getElementById('icoSelected').innerHTML = this.src;
  }
  function setup(cnt, id) {
    var imgEl = document.createElement('img');
    var icoName = "Cicons"+id+".png";
    imgEl.id = 'icon-'+id;
    imgEl.style.position = 'absolute';
    imgEl.style.left = (id-1)*100+20+'px';
    imgEl.style.width = '80px';
    imgEl.style.height = '80px';
    imgEl.src = icoName;
    imgEl.addEventListener('click', showSelected);
    cnt.appendChild(imgEl);
  }
  var cont = document.getElementById('iconContainer');
  for (var i=0, nIcons=10; i<nIcons; i++) {
    setup(cont, i+1);
  }
</script>
</body>
</html>

＆＃13;

使用var为img Jscript html创建的ID标记

1 个答案: