时间戳

首页 > 解决方案 > switchView 功能无法访问下一页内容

javascript - switchView 功能无法访问下一页内容

问题描述

我将为我的应用程序设计管理面板。我将我的家分成容器。我想在 Images.html 和 Categories.html 中显示点击项目的详细信息。当我单击第二个容器（也称为侧栏）中的菜单项时。我想显示图像和类别的详细信息，但我的 switchView 功能不起作用，我不知道为什么我无法显示 images.html 的内容和 categories.html 使用视图，但我无法访问我的下一个 html 页面的数据。请在这里真诚地关注。这是我的 admin.html（主页）代码：

<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="stylesheet.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"   crossorigin="anonymous"></script>
 <script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>
</head>
<body class="h-100">

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
    <a class="navbar-brand" href="#">
        Wallpaper App Admin
    </a>

    <div class="dropdown navbar-right">
        <button
                id="user-email"
                class="btn btn-secondary dropdown-toggle"
                type="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
        >
            probelalkhan@gmail.com
        </button>

        <div
                class="dropdown-menu"
                aria-labeledby="user-email"
        >
            <a class="dropdown-item" id="btn-logout" href="#">
                Logout
            </a>
        </div>
    </div>
</div>
</nav>

<div class="row h-100 bg-light">
<div class="col-lg-2 bg-secondary">
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="#" onclick="switchView('images.html')">
                <span class="text-dark">Images</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" onclick="switchView('categories.html')">
                <span class="text-dark">Categories</span>
            </a>
        </li>
    </ul>
</div>
<div class="col-lg-10">
    <div class="container" id="container">
        <h1>Images</h1>
    </div>
</div>
</div>


<script src="app.js"></script>

<script>
 firebase.auth().onAuthStateChanged(function(user){
    if(!user){
        window.location.href = "index.html";
    }
});
</script>
</body>
</html>

这是我的 app.js：

var firebaseConfig = {
apiKey: "AIzaSyA0nFgIbrXfWULyd9QJPZd60qfRhfAzC0Y",
authDomain: "mywallpaperapp-8ed57.firebaseapp.com",
databaseURL: "https://mywallpaperapp-8ed57.firebaseio.com",
projectId: "mywallpaperapp-8ed57",
storageBucket: "mywallpaperapp-8ed57.appspot.com",
messagingSenderId: "900270634824",
appId: "1:900270634824:web:4dfbcc86520c6f637ba57d"
};
// Initialize Firebase
 firebase.initializeApp(firebaseConfig);
firebase.auth.Auth.Persistence.LOCAL;

 $("#btn-login").click(function(){

 var email = $("#email").val();
 var password = $("#password").val();

  var result = firebase.auth().signInWithEmailAndPassword(email, password);

 result.catch(function(error){
    var errorCode = error.code;
    var errorMessage = error.message;

    console.log(errorCode);
    console.log(errorMessage);
});

});

$("#btn-logout").click(function(){
firebase.auth().signOut();
});

function switchView(view){
$.get({
    url:view,
    cache: false,
}).then(function(data){
    $("#container").html(data);
});
}

这段代码中的问题是因为我的 switchView 函数无法访问 images.html 和 categories.html，尽管我对它进行了完美的编码：

 <div class="col-lg-2 bg-secondary">
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="#" onclick="switchView('images.html')">
                <span class="text-dark">Images</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" onclick="switchView('categories.html')">
                <span class="text-dark">Categories</span>
            </a>
        </li>
    </ul>
</div>

请在此真诚关注。我会非常感谢你。

标签： javascripthtmlnode.jsbootstrap-4

解决方案

改变你的 switchView 功能如下：

function switchView(view){
    $.get({url: view, cache: false},function(data){
        $("#container").html(data);
    }); 
}

推荐阅读