如何重写这段代码？

所以我有我的网站的代码，我建立了自己，工作正常。问题是，我希望JavaScript代码更“干净”。我读到JavaScript是关于不重写代码的。问题是我不知道如何通过dropDownSeven函数重构dropDownOne。每个功能对应一个特定的按钮，点击后会通过应用“show”类来显示相应的信息块，该类只显示一个属性：Display：block;如何重写这段代码？

所以要包装起来：我怎样才能重写代码，这样我只需要说一个函数就可以点击所有的按钮。如果点击某个按钮，该按钮内容应该显示，而不是其他按钮。

-No 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'); 
      } 
     } 
    }

}

谢谢！

来源

2017-02-21 Maikel van Veen

戴上ID在一个数组，循环的，保持一个共同的功能并将值传递给循环中的该函数。 –

这应该在http：// codereview。stackexchange.com/ –

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>

来源

2017-02-21 13:06:22 piotrbienias

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>

来源

2017-02-21 13:08:43 TricksfortheWeb

您可以使用这和事件个关键字：

更改此HTML行：

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

到：

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

从MDN：

在一个在线的事件处理程序

当代码从一个in-li中调用NE上的事件处理程序，其它被设置为在其上收听者被放置的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：选择在分度类的所有按钮，类
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>

来源

2017-02-21 13:15:07 gaetanoM

您可以使用这样的方式也

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

感谢，

来源

2017-02-21 13:50:31

如何重写这段代码？

回答

相关问题