无法将div的显示样式设置为在事件侦听器中阻止

Question

我正在尝试实现在单击按钮后我的叠加div在整个页面上可见的行为。我试图使用jquery语法与.show() / .hide()和getElementById函数，但无法完成它。下面的代码以“1st state：block”和“2nd state：none”输出，虽然它应该是“2nd state：block”并且div根本不可见。这样做的正确方法是什么？

$(document).ready(function() {
    document.getElementById("save-button").addEventListener('click', function() {
        // $("#overlay").show();
        document.getElementById("overlay").style.display = 'block';
        var state = document.getElementById("overlay").style.display;
        console.log("1st state: " + state);
        $.ajax({
            type: "POST",
            url: "/myUrl?arg1=$(arg1)&arg2=$(arg2)",
            data: {arg1: arg1, arg2: arg2},
            success: function (response) {
                var state = document.getElementById("overlay").style.display;
                console.log("2nd state: " + state);
                // $("#overlay").hide();
                document.getElementById("overlay").style.display = 'none';
            },
            error: (resp) => {
                // $("#overlay").hide();
                document.getElementById("overlay").style.display = 'none';
            }
        });
        // $("#overlay").hide();
        document.getElementById("overlay").style.display = 'none';
    }, false);
})

HTML：

  <div id="overlay" class="overlay"></div>
  <button id="save-button">Save</button>

CSS：

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none; 
  padding: 0;
  margin: 0;  
}

Answer 1

那是因为你在document.getElementById("overlay").style.display = 'none';电话之后的$.ajax电话（第22~23行）。 ajax方法是异步的，将立即返回，导致叠加层被直接隐藏。

你应该只在你的$.ajax回调中隐藏你的叠加层。

删除该行，你应该没问题：

$(function() {
  var overlay = $("#overlay");
  $("#save-button").on("click", function() {
    overlay.show();
    $.ajax({
      type: "POST",
      url: "/myUrl",
      data: {
        arg1: arg1,
        arg2: arg2
      },
      success: function(response) {
        overlay.hide();
      },
      error: function(response) {
        overlay.hide();
      }
    });
  });
})

此外，如果您正在使用POST请求，为什么还要将数据作为GET参数传递？另外，你的代码风格很奇怪（有时是function，有时是箭头等），我建议你使用linter来保持一致。