如何使用客戶端JavaScript變量作爲數組索引？

所以我試圖教自己做一個網站。我使用node和expressJS服務器端將模板發送到客戶端。如何使用客戶端JavaScript變量作爲數組索引？

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文件有關城市巴黎，我想展示給客戶端的信息。它有一系列可用於圖片的圖片網址。我的問題是，我只想一次顯示一個圖像，並在按下某個按鍵時將圖像更改爲下一個圖像（如果需要，或者按下按鍵，則優先選擇按鍵）。

我的問題出現在客戶端，我可以得到JSON對象並基於它生成頁面，如果我在「index」變量的地方使用了一個值，例如[0]，但是如果我設置了它如圖所示，索引是「未定義的」。所以我的問題是，如何讓一個變量存在客戶端並讓我用新圖片重新渲染頁面，這甚至有可能嗎？我一直在閱讀堆棧溢出幾個小時，沒有什麼似乎是我想要的。

感謝。

HTML代碼--->

<% 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>

來源

2017-04-17 laminatedlama

你的意思是你想在客戶端渲染模板？這是一個官方的例子，如何去做。 https://github.com/tj/ejs/blob/master/examples/client.html – SeregPie

EJS在服務器上運行。這是服務器呈現網頁，然後變量在客戶端丟失。我會推薦一個for循環來包含所有圖像，當你渲染index.ejs但是把一類隱藏在除第一個之外的所有圖像上。然後使用一些前端JavaScript魔法，您可以並排查看圖像。你可以使用jquery/bootstrap。（Bootstrap carousel就是一個很好的例子）。

爲了存儲在前端的變量，你可以使用這個：

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

有些時候，這會簡單地評價爲[對象對象]，所以你可能想先使用JSON.stringify在服務器上邊

來源

2017-04-17 19:46:20 itsundefined

啊，這是一個很好的解決方案，我可能會使用它。但是，爲了將來的參考我的問題仍然存在，是否有可能存儲一個可變的客戶端和訪問並改變它的JavaScript片段？ – laminatedlama

編輯答案可以幫助你做你所要求的 – itsundefined

如何使用客戶端JavaScript變量作爲數組索引？

回答

相關問題