多个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

将参数添加到精简函数etviolà！

 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解耦。 该功能不需要知道哪个元素会受到样式调整的影响。 所以保持功能“转储”。

进一步学习： 反模式

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

Answer 2

内联JS很难维护。
我只使用一行CSS来隐藏元素，
并使用JS简单地切换.hide类 ：

 const toggleEl = e => document.getElementById(e.target.dataset.tog).classList.toggle("hide"); [...document.querySelectorAll("[data-tog]")].forEach( btn => btn.addEventListener("click", toggleEl) ); 

 .hide { display: none;} 

 <button data-tog="ContentOne">Button 1</button> <button data-tog="ContentTwo">Button 2</button> <button data-tog="ContentThree">Button 3</button> <div class="hide" id="ContentOne">This is Content One.</div> <div class="hide" id="ContentTwo">This is Content Two.</div> <div class="hide" id="ContentThree">This is Content Three.</div> 

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果您愿意，这是一个ES5示例：

 function toggleEl() { var id = this.getAttribute("data-tog"); document.getElementById(id).classList.toggle("hide"); } var buttons = document.querySelectorAll("[data-tog]"); [].forEach.call(buttons, function( btn ) { btn.addEventListener("click", toggleEl.bind(btn)) }); 

 .hide { display: none;} 

 <button data-tog="ContentOne">Button 1</button> <button data-tog="ContentTwo">Button 2</button> <button data-tog="ContentThree">Button 3</button> <div class="hide" id="ContentOne">This is Content One.</div> <div class="hide" id="ContentTwo">This is Content Two.</div> <div class="hide" id="ContentThree">This is Content Three.</div> 

Answer 3

您可以使用更高阶的功能。

function generateFunction(elementId) {
    return function() {
        var x = document.getElementById(elementId);
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }  
    }
}

var myFunction1 = generateFunction("ContentOne");
var myFunction2 = generateFunction("ContentTwo");
var myFunction3 = generateFunction("ContentThree");