如何在不手动编写每个变量的情况下使此代码正常工作？

Question

我现在的问题是，我必须手动编写每个变量和每个if子句才能让每个按钮都工作，这显然是太多工作，而且非常有限。

的示例代码我的作品如预期，但会太长非常快...

<script> 
    window.onclick = function(event) { 
     var modalEdit1 = document.getElementById('MODAL_EDIT1'); 
     var modalEdit2 = document.getElementById('MODAL_EDIT2'); 
     var modalEdit3 = document.getElementById('MODAL_EDIT3'); 
     var modal = document.getElementById('MODAL_ADD'); 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
     if (event.target == modalEdit1) { 
      modalEdit1.style.display = "none"; 
     } 
     if (event.target == modalEdit2) { 
      modalEdit2.style.display = "none"; 
     } 
     if (event.target == modalEdit3) { 
      modalEdit3.style.display = "none"; 
     } 
    } 

    function closeModal(target) { 
     var view = document.getElementById(target); 
     view.style.display = "none"; 
    } 

    function showModal(target) { 
     var view = document.getElementById(target); 
     view.style.display = "block"; 
    } 

编辑：是不是有办法通过增量来做到这一点？

Answer 1

给普通班的所有情态动词，那么如果目标有这个类中的所有目标有父有这个类，隐藏目标/目标父

Answer 2

如果event.target是你需要的元素：

window.onclick = function(event) 
{  
    var modal = document.getElementById('MODAL_ADD'); 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    event.target.style.display = "none"; 
} 

function closeModal(target) { 
    var view = document.getElementById(target); 
    view.style.display = "none"; 
} 

function showModal(target) { 
    var view = document.getElementById(target); 
    view.style.display = "block"; 
} 

Answer 3

您可以添加类来指定此行为。

下面是“可隐藏”类的示例。

window.onclick = function(event) { 
    if (event.targed.className == 'hideable') { 
    event.target.style.display = 'none' 
    } 
}