如何在查询选择器-JS中使用变量？

Question

我在做什么错？ 有7张图片，具有从“ IMG1”到“ IMG7”的预制ID

  function changeWidth() {
            let b = 50
            let k = 0
            let l = `"#img${(k + 1)}"`;
            for (let k = 0; k < 7; k++)
                
                document.querySelector("l").width = `${(b = b + 50)}`;

        }

Answer 1

评论涵盖了基础知识；将模板在循环中移动，从模板内部删除引号，并参考无引号的变量。

function changeWidth() {
  let b = 50
  for (let k = 0; k < 7; k++) {
    let l = `#img${(k + 1)}`;
    document.querySelector(l).width = `${(b = b + 50)}`;
  }
}

但是您实际上可以简化以不使用循环中的索引，k 1而不是0避免加法和使用getElementById比QuerySelector更有效。

function changeWidth() {
  for (let k = 1; k <= 7; k++) {
    document.getElementById(`img${k}`).width = `${50 + 50 * k}`;
  }
}