javascript - 多个 JavaScript 按钮简化为一个函数

Question

我有三个按钮和三个 JS 函数，用于切换三个不同 div 的显示。如何将我的三个 JS 函数简化/压缩为一个将每个按钮连接到其相应内容的函数？

例子:

HTML 按钮

<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
<button onclick="myFunction3()">Button 3</button>

HTML 内容

<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>

JavaScript

function myFunction1() {
    var x = document.getElementById("ContentOne");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("ContentTwo");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("ContentThree");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

Answer 1

向压缩函数中添加一个参数 et violà!

function myFunction(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="myFunction('ContentOne')">Button 1</button>
<button onclick="myFunction('ContentTwo')">Button 2</button>
<button onclick="myFunction('ContentThree')">Button 3</button>

<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>

说明

函数中唯一不同的部分是 ID，因此解耦 ID。该函数不需要知道哪个元素会受到样式调整的影响。所以保留函数“转储”。

进一步学习:Anti-Patterns

如果您有兴趣改进您的编程风格，我建议您看一看一些反模式。例如，您演示了 hard coding 的反模式.它并不像您想象的那么不典型。