Question

有谁知道这是为什么？

我试图通过点击相应的按钮来隐藏三个区域中的任何一个。

这是我的代码：

<div id="prod">Prod

  <button type="button" onclick="myFunction()" class="prodButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("prod").style.visibility = "hidden";
    }
  </script>
</div>
<div id="test">Test

  <button type="button" onclick="myFunction()" class="testButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("test").style.visibility = "hidden";
    }
  </script>
</div>
<div id="dev">Dev

  <button type="button" onclick="myFunction()" class="devButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("test").style.visibility = "hidden";
    }
  </script>
</div>

Answer 1

每次执行此操作：

function myFunction() {

你显然重新定义了这个功能（杀死旧功能并创建一个新功能，以便最后一个获胜）。你需要以这样的方式使它接受一个参数，并基于它应该做的事情。您滥用或未获得功能概念。

最终你的功能应该如下：

function myFunction(element) {
  document.getElementById(element).style.visibility = "hidden";
}

定义一次，应该多次调用，如下所示：

myFunction("prod");
myFunction("test");
myFunction("dev");

完整代码

<script>
  function myFunction(element) {
    document.getElementById(element).style.visibility = "hidden";
  }
</script>
<div id="prod">Prod
  <button type="button" onclick="myFunction(\"prod\")" class="prodButton">Hide</button>
</div>
<div id="test">Test
  <button type="button" onclick="myFunction(\"test\")" class="testButton">Hide</button>
</div>
<div id="dev">Dev
  <button type="button" onclick="myFunction(\"dev\")" class="devButton">Hide</button>
</div>

Answer 2

如果您真的想快速测试一些代码，那么您可以编写如下的内联JavaScript代码。但这不应该写成生产代码。

    <div id="prod">Prod
  <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="prodButton">Hide</button>
</div>
<div id="test">Test
  <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="testButton">Hide</button>
</div>
<div id="dev">Dev
  <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="devButton">Hide</button>
</div>

为什么同名的三个函数只能运行一次？

2 个答案: