Как переписать этот код?

Question

Итак, у меня есть этот код для моего сайта, который я создал сам и отлично работает. Дело в том, что я хочу, чтобы код JavaScript был «чище». Я читал, что JavaScript - это совсем не переписывающий код. Проблема в том, что я действительно не знаю, как реструктурировать функции dropDownOne через dropDownSeven. Каждая из функций соответствует определенной кнопке, которая при щелчке показывает соответствующий информационный блок, применяя к нему класс 'show', который получил только одно свойство: Display: block;

Итак, чтобы обернуть его: как мне получить, чтобы переделать код, так что мне нужно только сказать, что одна функция для всех кнопок, чтобы щелкнуть. Если нажата конкретная кнопка, содержимое этой кнопки должно отображаться, а не другое.

-Нет jQuery-

HTML:

<div class="dropdown"> 
     <button onclick="dropDownFour()" class="projectbuttons"> 
       PSD to Bussiness Site (01-2017) 
     </button> 
     <div id="dropdownfour" class="dropdown-content"> 
     <!--Content--> 
     </div> 
    </div> 

JavaScript:

function dropDownOne() { 
document.getElementById("dropdownone").classList.toggle("show"); 
} 

function dropDownTwo() { 
document.getElementById("dropdowntwo").classList.toggle("show"); 
} 

function dropDownThree() { 
document.getElementById("dropdownthree").classList.toggle("show"); 
} 

function dropDownFour() { 
document.getElementById("dropdownfour").classList.toggle("show"); 
} 

function dropDownFive() { 
document.getElementById("dropdownfive").classList.toggle("show"); 
} 

function dropDownSix() { 
document.getElementById("dropdownsix").classList.toggle("show"); 
} 

function dropDownSeven() { 
document.getElementById("dropdownseven").classList.toggle("show"); 
} 

window.onclick = function (event) { 
if (!event.target.matches('.aboutmebuttons, .projectbuttons, 
          #mailopenbutton, [name="name"], 
          [name="message"], ' + '[name="email"], 
          [name="submitmail"], [name="reset"], 
          #dropdownseven, #mailform') 
    ) { 
     var dropDowns = document.getElementsByClassName("dropdown-content"); 
     for (var i = 0; i < dropDowns.length; i++) { 
      var openDropDown = dropDowns[i]; 
      if (openDropDown.classList.contains('show')) { 
      openDropDown.classList.remove('show'); 
      } 
     } 
    } 

}

Спасибо!

Answer 1

function dropDown(id){ 
    document.getElementById(id).classList.toggle("show"); 
} 

И тогда вы могли бы использовать его как то

<div class="dropdown"> 
    <button onclick="dropDown('dropdownfour')" class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 
    <div id="dropdownfour" class="dropdown-content"> 
    <!--Content--> 
    </div> 
</div> 

Answer 2

function dropdown(dropdown){ 
    document.getElementById(dropdown).classList.toggle("show"); 
} 

Затем используйте этот HTML:

<div class="dropdown"> 
     <button onclick="dropdown('dropdownfour')" class="projectbuttons"> 
      PSD to Bussiness Site (01-2017) 
     </button> 
     <div id="dropdownfour" class="dropdown-content"> 
     <!--Content--> 
     </div> 
    </div> 

Answer 3

Вы можете использовать событие это и Ключевые слова:

Изменить этот HTML линия:

<button onclick="dropDownFour()" class="projectbuttons"> 

к:

<button onclick="dropDown(this, event)" class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 

От MDN:

В обработчик событий в линии

Когда код вызывается из in-li п на обработчик события, его установка на элемент DOM, на котором находится слушатель:

и окончательные функции:

function dropDown(ele, evt) { 
    ele.classList.toggle("show"); 
} 

Фрагмент:

function dropDown(ele, evt) { 
 
    ele.classList.toggle("show"); 
 
}

.show { 
 
    display: none; 
 
}

<div class="dropdown"> 
 
<button onclick="dropDown(this, event)" class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 
 
<div id="dropdownfour" class="dropdown-content"> 
 
    <!--Content--> 
 
    aaaaaaaaaaaaaaaaaaaa 
 
</div> 
 
</div>

Другая короткая форма основана на:

• DOMContentLoaded: когда документ готов
• querySelectorAll: выбрать все кнопки с классом под DIV с классом
• addEventListener: создать click обработчик события for each элемент

window.addEventListener('DOMContentLoaded', function(e) { 
 
    document.querySelectorAll('div.dropdown button.projectbuttons').forEach(function(ele, idx) { 
 
     ele.addEventListener('click', function(e) { 
 
      ele.classList.toggle("show"); 
 
     }) 
 
    }); 
 
});

.show { 
 
    display: none; 
 
}

<div class="dropdown"> 
 
    <button class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 
 
    <div id="dropdownfour" class="dropdown-content"> 
 
     <!--Content--> 
 
     aaaaaaaaaaaaaaaaaaaa 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 
 
    <div id="dropdownfour" class="dropdown-content"> 
 
     <!--Content--> 
 
     bbbbbb 
 
    </div> 
 
</div> 
 

 

 
<div class="dropdown"> 
 
    <button class="projectbuttons">PSD to Bussiness Site (01-2017)</button> 
 
    <div id="dropdownfour" class="dropdown-content"> 
 
     <!--Content--> 
 
     ccccc 
 
    </div> 
 
</div>

Answer 4

Вы можете использовать как этот способ также

HTML

<div class="dropdown"> 
    <button onclick="dropDown(this)" class="projectbuttons"> 
     1 button 
    </button> 
    <div id="dropdownone" class="dropdown-content"> 
    <!--Content--> 1 content 
    </div> 
</div> 
<div class="dropdown"> 
    <button onclick="dropDown(this)" class="projectbuttons"> 
     2 button 
    </button> 
    <div id="dropdowntwo" class="dropdown-content"> 
    <!--Content--> 2 content 
    </div> 
</div> 
<div class="dropdown"> 
    <button onclick="dropDown(this)" class="projectbuttons"> 
      3 button 
    </button> 
    <div id="dropdownthree" class="dropdown-content"> 
    <!--Content--> 3 content 
    </div> 
</div> 

JAVASCRIPT

function dropDown(element){ 
    element.parentElement.getElementsByClassName("dropdown-content")[0].classList.toggle("show") ; 
} 

Спасибо,