javascript - 如何使用 switch 语句将图像添加到 div 元素？

Question

想法是，每次生命减少 1 时，就会少显示一张图像，或者稍后出现在 div 元素中。代码还没有完成，我稍后会添加其余的代码(5-1)，但我想先看看我这样做的方式是否可行。希望我展示的内容足以让您了解我正在尝试做的事情。

function lifeloss() {
  life -= 1;
  var life = document.getElementById("lifecount");
  switch (life) {
    case 1:
      if (life >= 5) {
        life.innerHTML += "<img class="life" src="life.png">"
      }
      break;
    default:

  }
}

Answer 1

switch 语句用于具体值。由于您正在寻找一个范围(即 life >= 5)，您应该满足于 if/else 语句:

function lifeloss() {
  life -= 1;
  var lifecount = document.getElementById("lifecount");

  if (life >= 5) {
    lifecount.innerHTML += '<img class="life" src="life.png" />';
  } else if (life >= 1) {
    //Perhaps a low life image?
  } else {
    //We're dead Jim
  }
}

重新阅读问题后，如果您希望为每个生命复制生命图像，我建议使用 string.repeat() :

function lifeloss() {
  life -= 1;
  var lifecount = document.getElementById("lifecount");

  var lifeImg = '<img class="life" src="life.png" />';

  lifecount.innerHTML = lifeImg.repeat(life);
}