jQuery单击可见元素处理程序之一

Question

When my modal window is visible, when i click on #screen or on #loading_modal i need to hide this div's, but how can i do that, and how to write it correctly, now my code is not working, but also i have same for two objects (#screen, #loading_modal).... I'm new in js, how to refactor this code, and make it working properly... ?

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

Answer 1

If I have understood you correctly I think you need to put the check for visibility inside the click handlers like so:

$("#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();  
    }
});

Answer 2

No need for the if statement here, you can simply use:

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

So:

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

If the functions are going to perform identical tasks, you can simply use:

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

Answer 3

you are doing wrong. you can check the Condition in click event. once the click event fired. put if conditon in side the click event handler

$("#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();  
    }
});

Answer 4

You can just refactor your code to look like this

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

There's no need to check if it's visible

If it's dynamically created, you will need to delegate or bind after creation of the elements

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