JavaScript: как уменьшить функции?

Question

Как уменьшить ниже 4 функции в один? Как создать единую область для следующей функции для работы.

var ele; 
var ele1; 
var ele2; 
var ele3; 
var ele4; 
function Myfunction(obj) { 
    ele=document.getElementById(obj).style; 
    if(ele.display=="none") { 
     ele.display="block"; 
     ele1.display="none"; 
     ele2.display="none"; 
     ele3.display="none"; 
    } 
    else { ele.display="none"; } 
} 

Как создать единую область для следующей функции для работы.

function Myfunction1(obj1) { 
    ele1=document.getElementById(obj1).style; 
    if(ele1.display=="none") { 
     ele1.display="block"; 
     ele.display="none"; 
     ele2.display="none"; 
     ele3.display="none"; 
    } 
    else { ele1.display="none"; } 
} 

Как создать единую область для следующей функции, чтобы работать.

function Myfunction2(obj2) { 
    ele2=document.getElementById(obj2).style; 
    if(ele2.display=="none") { 
     ele2.display="block"; 
     ele.display="none"; 
     ele1.display="none"; 
     ele3.display="none"; 
    } 
    else { ele2.display="none"; } 
} 

Как создать единую область для следующей функции для работы.

function Myfunction3(obj3) { 
    ele3=document.getElementById(obj3).style; 
    if(ele3.display=="none") { 
     ele3.display="block"; 
     ele.display="none"; 
     ele2.display="none"; 
     ele1.display="`enter code here`none"; 
    } 
    else { ele3.display="none"; } 
} 

Answer 1

Вы можете сделать все это в одной функции,

первым добавить класс для всех элементов commonClass вы можете изменить это имя в соответствии с вашей функцией.

Теперь создайте функцию и передайте идентификатор элементов.

function Myfunction(obj) { 
    var x = document.querySelectorAll(".commonClass"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    document.querySelector("#"+obj).style.display = "block"; 
} 

Хотя есть много способов сделать это, но его просто понять.