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

【问题标题】：How to add a image to a div element with a switch statement?如何使用 switch 语句将图像添加到 div 元素？
【发布时间】：2018-10-18 10:29:14
【问题描述】：

这个想法是，每次生命值下降 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:

  }
}

【问题讨论】：

我不明白在 life = 1 的情况下生命如何 >=5。
@AlixBergeret 就像你说你 20 岁但实际上是 25 岁。
@AlixBergeret 我在函数之外有 var life = 5，不过这可能是我的错误

标签： javascript function switch-statement

【解决方案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);
}

【讨论】：

我使用了 string.repeat()，现在我没有收到任何控制台错误，但图像没有显示。可能是代码的其余部分，或者我想在函数中也有 var life = 5？
在元素检查器中检查你的 lifecount 元素。 .innerHTML 设置是否正确？ life.png 存在吗？
console.log(life)（是否大于1？）
life.png 确实存在。不知道正确设置 .innerHTML 是什么意思，我有一个 id="lifecount" 的 div，所以我假设是这样？
生命是 5 @FrankerZ

【解决方案2】：

使用您提供的代码，将永远不会读取 if 语句，因为您检查了 life 等于 1 时的情况，并且在该语句下您还检查了 life 是否大于 5。基本上当 life = 1 , 你想检查它是否也是 >= 5。

【讨论】：