Keypress-Funktion für zwei Seiten

Question

Ich habe eine Seite, die, wenn ein Link geklickt wird, verwende ich den ajax Anruf, um seinen Inhalt in einem gegebenen div zu laden. Nun mein Problem ist das, In Seiten von link-1 und link-2 Ich habe diesen Code in jedem

<!-- THIS IS FOR THE FIRST LINK--> 
$(document).keyup(function(e) { 
    x = document.getElementById("show_photo<?php echo $id; ?>"); 
    y = document.getElementById("full_photo<?php echo $id; ?>"); 
    if(e.keyCode == 27){ 
     if(y.style.display == "block"){ 
      $("#full_photo<?php echo $id; ?>").css('display', 'none'); 
     } else if(x.style.display !== "block"){ 
      $("#all_photo<?php echo $id; ?>").css('display', 'none'); 
     } 
    } 
}); 

<!-- THIS IS FOR THE SECOND LINK--> 
$(document).keyup(function(e) { 
    x = document.getElementById("show_photo"); 
    y = document.getElementById("full_photo"); 
    if(e.keyCode == 27){ 
     if(y.style.display == "block"){ 
      $("#full_photo").css('display', 'none'); 
     } else if(x.style.display !== "block"){ 
      $("#all_photo").css('display', 'none'); 
     } 
    } 
}); 

Die id s sind anders, weil page-1 läuft in einer DB-Abfrage-Schleife. Wenn jetzt link-1 geklickt wird und die Seite hochfährt, funktioniert der Code normal, aber wenn link-2 angeklickt wird und eine Seite geladen wird, funktioniert der Code nicht mehr. Es heißt Cannot read property 'style' of null in meinem console.log, also fand ich heraus, dass, wenn ich link-1 laden den Code ausgeführt wird und wenn ich link-2 laden, obwohl die link-1 Seite nicht mehr sichtbar ist, läuft der Code noch auf der Seite. Also, wenn ich auf den ESC Schlüssel klicke, kann es die id s von der page-1 nicht finden, so gebe ich den Fehler im console.log ein. Bitte, gibt es irgendeine Möglichkeit, dass ich beide Codes auf den zwei verschiedenen Seiten ausführen kann, ohne dass beide miteinander kollidieren?

Answer 1

Try like this 
-------------- 
code 
------ 
    <!-- THIS IS FOR THE SECOND LINK--> 
    $(document).keyup(function(e) { 
     x = document.getElementById("show_photo"); 
     y = document.getElementById("full_photo"); 
     if(e.keyCode == 27){ 
      if(x){ 
       if(x.style.display !== "block"){ 
        $("#all_photo").css('display', 'none'); 
       } 
      } 
      if(y){ 
       if(y.style.display == "block"){ 
        $("#full_photo").css('display', 'none'); 
       } 
      } 
     } 
    });