Question

我试图实现一种行为，在按钮点击后，我的叠加div在整个页面上都可见。我试图将jquery语法与.show() / .hide()和getElementById函数一起使用，但无法完成。下面的代码输出＆＃34;第一状态：块＆＃34;和＆＃34;第二个州：没有＆＃34;，虽然它应该是＆＃34;第二个州：块＆＃34;并且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来保持一致。

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

1 个答案: