0

当我的模态窗口可见时，当我单击#screen 或#loading_modal 时，我需要隐藏此div，但是我该怎么做，以及如何正确编写它，现在我的代码不起作用，但我也有对于两个对象（#screen，#loading_modal）......我是js新手，如何重构这段代码，并使其正常工作......？

  if ($('#screen').is(':visible')) {
    $("#screen").click(function() {    
      $('#screen').hide();
      $('#loading_modal').hide();  
    });
     $("#loading_modal").click(function() {    
      $('#screen').hide();
      $('#loading_modal').hide();  
    });
  }
4

4 回答 4

1

如果我对您的理解正确，我认为您需要在点击处理程序中检查可见性，如下所示：

$("#screen").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
$("#loading_modal").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
于 2013-03-11T15:31:10.847 回答
1

这里不需要if声明，你可以简单地使用：

$('element:visible').click(function() { ... })

所以：

$("#screen:visible").click(function() {    
    $(this).hide();
    $('#loading_modal').hide();  
});
 $("#loading_modal:visible").click(function() {    
    $('#screen').hide();
    $(this).hide();  
});

如果函数要执行相同的任务，您可以简单地使用：

$("#screen:visible, #loading_modal:visible").click(function() {    
    $('#screen').hide();
    $('#loading_modal').hide();  
});
于 2013-03-11T15:33:20.990 回答
1

你做错了。您可以检查点击事件中的条件。一旦点击事件触发。将if条件放在单击事件处理程序中

$("#screen").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
$("#loading_modal").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
于 2013-03-11T15:33:24.003 回答
1

你可以重构你的代码看起来像这样

$("#screen,#loading_modal").click(function() { 
      $('#screen,#loading_modal').hide();       
});

无需检查它是否可见

如果它是动态创建的，则需要在创建元素后进行委托或绑定

$('body').on('click',"#screen,#loading_modal",function() { 
      $('#screen,#loading_modal').hide();       
});
于 2013-03-11T15:36:04.740 回答