单击索引时将参数传递到模板文件中
我有一个由 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>
慕码人24836931回答
-
沧海一幻觉
您在这里重复了很多事情，导致它没有得到优化。如果你会使用函数，请使用它们！如果没有，更好的方法是：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>
随时随地看视频慕课网APP
相关分类
JavaScript