Несколько кнопок JavaScript упрощены в одну функцию

Question

У меня есть три кнопки и три функции JS, которые переключают отображение трех разных делений. Как я могу упростить / сжать мои три функции 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>

Объяснение

Единственная часть, которая отличается в функциях - это идентификатор, поэтому отсоедините идентификатор. Функция не должна знать, какой элемент будет затронут адаптацией стиля. Так что держите функцию «сброс».

Дальнейшее обучение: Анти-паттерны

Если вы заинтересованы в улучшении вашего стиля программирования, я предлагаю вам взглянуть на анти-паттерн . Например, вы продемонстрировали антипаттерн с жестким кодированием . Это не так необычно, как вы думаете.

Answer 2

Inline JS сложно поддерживать.
Я бы использовал этот код с одной строкой CSS, чтобы скрыть элементы,
и просто используйте JS, чтобы переключить .hide class :

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");