用于两页的按键功能

Question

我有一个页面，当单击一个链接时，我使用ajax调用在给定的div中加载它的内容。现在我的问题是，在link-1和link-2页面中，我在每个页面中都有以下代码

<!-- 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');
        }
    }
});

因为page-1在DB查询循环中运行，所以id是不同的。现在，如果单击link-1并加载页面，代码将正常运行，但如果单击link-2并加载其页面，代码将不再起作用。它在我的console.log中显示Cannot read property 'style' of null，所以我发现当我加载link-1时，代码会被执行，当我加载link-2时，即使link-1页面不再可见，代码仍然在页面中运行。因此，当我单击ESC键时，它无法从page-1中找到id，所以我在console.log中给出了错误。有没有办法在两个不同的页面中同时运行两个代码，而不会发生冲突呢？

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');
                }
            }
        }
    });