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

id是不同的，因为page-1在数据库查询循环中运行。现在如果单击link-1并且页面加载，则代码正常运行但如果单击link-2并且其页面加载，则代码不会再次运行。它在Cannot read property 'style' of null中显示console.log，因此我发现当我加载link-1代码时，即使link-2加载link-1，代码仍会执行页面不再可见，代码仍然在页面中运行。因此，当我点击ESC密钥时，它无法从id找到page-1，因此我在console.log中提供错误。请问有什么方法可以在两个不同的页面中运行这两个代码而不会彼此冲突？

Answer 1

$provide.factory('MyHttpInterceptor', function($q, $location, $localStorage) {
return {
    request : function(config) {
        var apiPattern = /\/api\//;

        config.params = config.params || {};

        if ($localStorage.access_token && apiPattern.test(config.url)) {
            config.params.access_token = $localStorage.access_token;
        }
        return config || $q.when(config);
    }
  };
});
// Add the interceptor to the $httpProvider.

$httpProvider.interceptors.push('MyHttpInterceptor');

Keypress功能为两页

1 个答案: