javascript - 我如何优化这一长行 "if"语句？

Question

所以，我正在使用 Javascript 制作一个唱首歌游戏，我遇到了我需要制作很多，我说的是 300 个 if 语句。我完成了所有极其繁琐的工作，并开始了我的游戏。

为了向您展示问题，我需要向您展示我的游戏。所以基本上，每当我点击一个按钮时，十张图片中的一张就会更新。

问题是，我为每个数字和您可以收集的每种 Material 制作了大量的 if 语句。

我想知道是否有办法摆脱所有这些 if 语句，让游戏正常运行，或者有什么办法可以优化它。

代码: JSFiddle大多数代码是这样的:

if (A == 18) {
    document.getElementById("A1").src = "images/blocks/2A.png";
    document.getElementById("A2").src = "images/blocks/2A.png";
    document.getElementById("A3").src = "images/blocks/2A.png";
    document.getElementById("A4").src = "images/blocks/2A.png";
    document.getElementById("A5").src = "images/blocks/2A.png";
    document.getElementById("A6").src = "images/blocks/2A.png";
    document.getElementById("A7").src = "images/blocks/2A.png";
    document.getElementById("A8").src = "images/blocks/2A.png";
    document.getElementById("A9").src = "images/blocks/1A.png";
    document.getElementById("A10").src = "images/blocks/1A.png";
}

如果您需要实际游戏的链接，请告诉我，因为 JSFiddle 没有我的图片。

Answer 1

这完全取决于你重构后的样子。你说你有很多 If 语句，如果这些语句比较同一个变量 A 那么可以使用 switch 语句，例如:

switch (A)
{
   case 18: 
    document.getElementById("A1").src = "images/blocks/2A.png";
    document.getElementById("A2").src = "images/blocks/2A.png";
    document.getElementById("A3").src = "images/blocks/2A.png";
    document.getElementById("A4").src = "images/blocks/2A.png";
    document.getElementById("A5").src = "images/blocks/2A.png";
    document.getElementById("A6").src = "images/blocks/2A.png";
    document.getElementById("A7").src = "images/blocks/2A.png";
    document.getElementById("A8").src = "images/blocks/2A.png";
    document.getElementById("A9").src = "images/blocks/1A.png";
    document.getElementById("A10").src = "images/blocks/1A.png";
    break;
   case 19: 
    document.getElementById("A1").src = "images/blocks/2A.png";
    document.getElementById("A2").src = "images/blocks/2A.png";
    document.getElementById("A3").src = "images/blocks/2A.png";
    etc...
    break;

   default: 
       document.getElementById("A1").src = "images/blocks/2A.png";
       break;
}

看起来您可能想要创建一个函数来传入 elementID 并返回图像的字符串作为第二个重构。