我有一个由 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 函数中读取（写入实际的表行）。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>
添加回答
举报
0/150
提交
取消