首頁猿問單擊索引時將參數傳遞到模板文件中

單擊索引時將參數傳遞到模板文件中

JavaScript

慕碼人2483693 2023-07-20 15:44:56

我有一個由 JS 文件中的一些 JSON 填充的表。data.js 看起來像這樣：var data = [ { title: "Avengers Endgame Trailer", year: 2019, type: "MOV", file: "video1.mp4" }, { title: "Avengers Infinity War Poster", year: 2018, type: "PNG", file: "image1.png" }];數據在我的functions.js 文件中的JS 函數中讀?。▽懭雽嶋H的表行）。function populateTable() { for (var i = 0; i < data.length; i++) { if (data[i].type == "MOV") { var row = '<tr><td><a href="video.html?=' + data[i].file + '">' + data[i].title + "</a></td>"; row += "<td>" + data[i].year + "</td></tr>"; $("#contents").append(row); } else { var row = '<tr><td><a href="image.html?=' + data[i].file + '">' + data[i].title + "</a></td>"; row += "<td>" + data[i].year + "</td></tr>"; $("#contents").append(row); } }}我想要弄清楚的是如何允許每個項目的鏈接使用不同的模板文件。我在上面的 HREF 中編寫了一些虛擬代碼，但這顯然不正確。對于模板，我有兩個：video.html 和 image.html。我想將所點擊的索引的文件名作為參數傳遞到模板文件中，以便它可以顯示正確的文件，但我不確定該怎么辦？例如，video.html 模板文件如下所示：<html> <body> <div class="container"> <video autoplay muted loop id="main"> <source src="{filenameGoesHere?}" type="video/mp4"> Your browser does not support HTML5 video. </video> </div> </body></html>

查看完整描述

1 回答

滄海一幻覺

TA貢獻1824條經驗獲得超5個贊

您在這里重復了很多事情，導致它沒有得到優化。如果你會使用函數，請使用它們！如果沒有，更好的方法是：

function populateTable() {

? for (var i = 0; i < data.length; i++) {

? ? // Look how I have made the file addition here.

? ? var row = '<tr><td><a href="' + (data[i].type == "MOV" ? "video" : "image") + ".html?=" + data[i].file + '">' + data[i].title + "</a></td>";

? ? row += "<td>" + data[i].year + "</td></tr>";

? ? // Do the MOV vs. PNG thing/

? ? row += "<tr><td>";

? ? if (data[i].type == "MOV") {

? ? ? row += `<div class="container">

? ? ? ? ? ? <video autoplay muted loop id="main">

? ? ? ? ? ? ? <source src="${data[i].file}" type="video/mp4" />

? ? ? ? ? ? ? Your browser does not support HTML5 video.

? ? ? ? ? ? </video>

? ? ? ? </div>`;

? ? } else {

? ? ? row += `<div class="container">

? ? ? ? ? ? <img src="${data[i].file}" alt="${data[i].title}" />

? ? ? ? </div>`;

? ? }

? ? row += "</td></tr>";

? ? $("#contents").append(row);

? }

}

在上面的代碼中：

看看我是如何在第 4 行添加文件的。
在第 7 行執行 MOV 與 PNG 的操作。

對于模板化的事情，使用How to read GET data from a URL using JavaScript??，你可以做的是：

<html>

? ? <body>

? ? ? ? <div class="container">

? ? ? ? ? ? <video autoplay muted loop id="main">

? ? ? ? ? ? ? <source src="" id="src" type="video/mp4" />

? ? ? ? ? ? ? Your browser does not support HTML5 video.

? ? ? ? ? ? </video>

? ? ? ? </div>

? ? </body>

? ? <script>

? ? ? ? var params = new URLSearchParams(location.search);

? ? ? ? document.getElementById("src").setAttribute("src", params.get('file'));

? ? </script>

</html>

反對回復 2023-07-20

1 回答
0 關注
142 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊索引時將參數傳遞到模板文件中

單擊索引時將參數傳遞到模板文件中

1 回答

添加回答