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

如果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 2

为所有模态赋予公共类，然后如果目标具有此类，则所有目标都具有此类的父级，隐藏目标/目标的父级

Answer 3

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

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

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

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

3 个答案: