Question

所以我正在努力教自己创建一个网站。我正在使用node和expressJS服务器端将模板发送到客户端，就像这样。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {

    var cityData = require("../public/cityData/paris.json");

    res.render('index', {
        cityData : cityData 
     });
});

module.exports = router;

在这种情况下，我只是传递一个JSON文件，其中包含我想要显示给客户端的巴黎市的信息。它有一系列图像URL，我可以用于图片。我的问题是我只想一次显示一个图像，并在按下一个键时将图像更改为下一个图像（如果需要，可以将按钮改为下一个图像，但优先选择按键）。

我的问题来自客户端，我可以获取JSON对象并基于它生成页面，如果我在“index”变量的位置使用值[0]，但如果我将其设置为如图所示，索引是“未定义的”。所以我的问题是，如何创建一个存在于客户端的变量并允许我用新图片重新呈现页面，这是否可能？我已经读了几个小时的堆栈溢出，似乎没有什么是我想要的。

感谢。

HTML code ---＆gt;

<% include templates/head.ejs %>

<script "text/javascript" >
    var index = 0;
</script>

<body>
    <!-- This imports the naviagtion template I made -->
    <% include templates/navigation.ejs %>
    <div id="wrapper">
        <% include templates/sidebar.ejs %>
        <!-- Page Content -->
        <div id = "page-content-wrapper">
            <div class="container-fluid">
                <!-- This imports an image -->
                <div class = "row">
                    <div class = "text-center">
                         <img id = "imgArea" src = <%- cityData.imageUrl[index] %> class = "img-rounded col-xs-12 col-md-6" width = "device-width">
                    </div>
                </div>   
            </div>
        </div>
    </div>

    <!-- Menu Toggle Script -->
    <script>
        $("#menu-toggle").click( function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("menuDisplayed");
        });
        $(document).keydown(function(e){
            index ++;
            document.getElementById("imgArea").innerHTML = cityData.imageURL[index];
        });
    </script>
</body>

Answer 1

EJS在服务器上运行。这是呈现网页的服务器，然后变量在客户端丢失。当你渲染index.ejs时，我会建议使用for循环来包含所有图像。但是在第一个图像之外的所有图像上放置一个隐藏类。然后使用一些前端JavaScript魔术你可以并排查看图像。您可以使用jquery / bootstrap。（Bootstrap carousel就是一个很好的例子）。

为了在前端存储变量，您可以使用：

<script>
var frontEndVar = <%= EJSvar %>;
</script>

有时这会简单地评估为[object Object]，因此您可能希望首先在服务器端使用JSON.stringify

如何使用客户端javascript变量作为数组索引？

1 个答案: