javascript - 如何在 div 单击时调用函数，以及正确使用开关？-6ren

javascript - 如何在 div 单击时调用函数，以及正确使用开关？

转载作者：行者123 更新时间：2023-11-28 00:57:33

26

4

我正在尝试制作一个游戏，当用户单击按钮/div(将来清除地板)时，用户将被发送到新的“楼层”，一个新的 div“亮起”(变黑)但我似乎无法让它工作。所以想法是通过单击 div，它会调用函数，它将变量级别提高 1，并且当开关运行时，它会亮起(将 div 变黑)许多 ID 为“floor1-”的 div 9"

var level = 1

function floor() {
  level += 1;
}
switch (floor) {
  case 1:
    if (level >= 1) {
      document.getElementById("floor1").style.color = "black";
    } else {
      document.getElementById("floor1").style.color = "white";
    }
    break;
  case 2:
    if (level >= 2) {
      document.getElementById("floor2").style.color = "black";
    } else {
      document.getElementById("floor2").style.color = "white";
    }
    break;
  case 3:
    if (level >= 3) {
      document.getElementById("floor3").style.color = "black";
    } else {
      document.getElementById("floor3").style.color = "white";
    }
    break;
  case 4:
    if (level >= 4) {
      document.getElementById("floor4").style.color = "black";
    } else {
      document.getElementById("floor4").style.color = "white";
    }
    break;
  case 5:
    if (level >= 5) {
      document.getElementById("floor5").style.color = "black";
    } else {
      document.getElementById("floor5").style.color = "white";
    }
  case 6:
    if (level >= 6) {
      document.getElementById("floor6").style.color = "black";
    } else {
      document.getElementById("floor6").style.color = "white";
    }
    break;
  case 7:
    if (level >= 7) {
      document.getElementById("floor7").style.color = "black";
    } else {
      document.getElementById("floor7").style.color = "white";
    }
    break;
  case 8:
    if (level >= 8) {
      document.getElementById("floor8").style.color = "black";
    } else {
      document.getElementById("floor8").style.color = "white";
    }
    break;
  case 9:
    if (level >= 9) {
      document.getElementById("floor9").style.color = "black";
    } else {
      document.getElementById("floor9").style.color = "white";
    }
    break;
  default:

}

html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}

<body>
  <div class="quizdiv">
    <div onclick="floor()" class="button"></div>
  </div>
  <div class="level">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="floor" id="floor5"></div>
    <div class="floor" id="floor6"></div>
    <div class="floor" id="floor7"></div>
    <div class="floor" id="floot8"></div>
    <div class="floor" id="floor9"></div>
  </div>
</body>

最佳答案

我稍微修改了代码。

在 floor() 函数中移动了 switch
将 color 更改为 backgroundColor。
去掉了所有的else，我觉得没必要
将 floot8 更改为 floor8
将level = 1更改为level = 0，这样函数就会进入case 1
<

不确定这是否是您想要的，但这点亮了直到最后一层的所有分区。由于我使用了您的原始格式，因此我没有费心优化代码

var level = 0;

function floor() {
  level += 1;
  switch (level) {
    case 1:
      if (level >= 1) {
        document.getElementById("floor1").style.backgroundColor = "black";
      }
      break;
    case 2:
      if (level >= 2) {
        document.getElementById("floor2").style.backgroundColor = "black";
      }
      break;
    case 3:
      if (level >= 3) {
        document.getElementById("floor3").style.backgroundColor = "black";
      }
      break;
    case 4:
      if (level >= 4) {
        document.getElementById("floor4").style.backgroundColor = "black";
      }
      break;
    case 5:
      if (level >= 5) {
        document.getElementById("floor5").style.backgroundColor = "black";
      }
    case 6:
      if (level >= 6) {
        document.getElementById("floor6").style.backgroundColor = "black";
      }
      break;
    case 7:
      if (level >= 7) {
        document.getElementById("floor7").style.backgroundColor = "black";
      }
      break;
    case 8:
      if (level >= 8) {
        document.getElementById("floor8").style.backgroundColor = "black";
      }
      break;
    case 9:
      if (level >= 9) {
        document.getElementById("floor9").style.backgroundColor = "black";
      }
      break;
    default:

  }
}

html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}

<body>
  <div class="quizdiv">
    <div onclick="floor()" class="button"></div>
  </div>
  <div class="level">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="floor" id="floor5"></div>
    <div class="floor" id="floor6"></div>
    <div class="floor" id="floor7"></div>
    <div class="floor" id="floor8"></div>
    <div class="floor" id="floor9"></div>
  </div>
</body>

关于javascript - 如何在 div 单击时调用函数，以及正确使用开关？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52869955/

26

4

0

AngularJS 开关
我想要 angularJs 中的一个按钮，当我按下它时会调用一个函数，当我再次按下它时它会执行另一个功能，比如 ON-OFF 开关。我有这个: 我会在单击一次时调用另一个函数。最佳答案您可
Doxygen 开关
我有一个相当大的 switch 语句(或同样大的 if 语句)，我想在 Doxygen 中记录一些方法，可能是调用者图，或者可能是某种流程图格式。我怎样才能做到这一点？谢谢 ! 最佳答案通常 d
c# - 在这里我可以用什么代替(开关)？
public int[] Level1Items(int floor) { switch (floor) { case 0: case 1:
r - 开关/外壳的成语
我有一些R代码看起来基本上是这样的： compute.quantiles <- function(mu, type) { ## 'mu' and 'type' are vectors of the
javascript 开关(真)
嗨，我正在尝试处理 ajax json 响应这是我的代码 success: function (j) { switch(true) { case (j.cho
显示新按钮组的 Javascript 开关
我在尝试在 Javascript 中进行切换时遇到问题，当切换激活时，根据情况，程序将显示许多新按钮，您可以单击这些按钮并播放声音。这是我的 HTML 和 Javascript，带有第一组按钮: f
java - 方法流程+开关
static double rSetzen(){ double r; System.out.println("Sind sie männlich oder weiblich?");
Haskell 开关/案例使用
作为我用 Haskell 编写的迷你解释器的一部分，我正在编写一个执行以下操作的函数:如果是 eval (App e1 e2) ，我想递归评估 e1 ( eval e1 )，将结果设置为 v1 .然后
c - 开关/外壳问题
对于C语言，我知道我很接近，但是对于输入的任何字符，打印输出都是“辅音”。我的 switch case 语句有什么问题。我需要 if 语句吗？ #include #include int main
类类型的 C# 开关
我有以下方法，它以类的类型作为参数: public void test(Type proType){ } 我目前有一个很大的 if else 看起来像: if(proType == typeof(Cl
c - 返回定义(开关)
我正在编写带有开关功能的代码。我希望我的默认代码打印“错误”并使程序停止运行。我应该在默认值末尾添加 return 1; 吗？如果是这样，这样对吗？ switch (course3) { c
c# - 按名称调用类或选择案例/开关？
VB.NET，但 C# 也可以。我有一个 MustInherit 基类和 170 个基于它的继承类。为什么这么多？因为每个继承的类在 Sub New() 中做了不同的事情。继承的类型不添加任何新属性
C++ 开关 - 预处理案例参数？
在我的开关中，我希望案例从 0 变为 (number_of_cases-1)，而无需自己编写数字。因此，如果我在中间删除一个 case block ，则以下 case 将重新编号(减 1)，以便再次从
Android Material 开关
我想在我的应用中使用精确的 Material 开关。正是谷歌设计指南中的那些。 https://www.google.com/design/spec/components/selection-cont
Javascript 切换/开关？
有没有比我使用的更好的方法来实现切换/开关。它有效，但对我来说似乎很笨拙。 var foo = true; $(document).on("click","$element",function(){
带有全局变量的 JavaScript 开关
我尝试将全局变量与 switch 语句一起使用，但变量的值没有改变。也许是范围问题？我需要一个 switch 语句来逐一循环遍历每种情况，但每次我在控制台中查看时，“i”变量都会重置为 1。为什么
jquery div 开关
我最近在一个网站上工作，在本地主机上一切正常，但是当我将它移到服务器上时，更改 div 函数开始加载怪异，我不知道为什么。当您循环浏览投资组合按钮和联系人按钮时，该错误会更加明显。该网站仅针对 Fi
C++ 开关 () 错误
我一直在开发一个使用 switch() 函数的项目，如下所示: switch (selectedMenu) { case 1: switch (selectedIndex) {
C# 开关/案例共享相同的范围？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Variable declaration in c# switch statement 我一直想知道: 当我
PHP 开关，为什么这不起作用？
我有一个奇怪的问题，我似乎无法解决。我有相当复杂的代码，但我已经简化了它，问题仍然存在。请参阅以下内容: 'correct'); switch (true) { case empty($m

首页

博学

6Ren·AI

商城

javascript - 如何在 div 单击时调用函数，以及正确使用开关？