第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

單擊索引時(shí)將參數(shù)傳遞到模板文件中

單擊索引時(shí)將參數(shù)傳遞到模板文件中

慕碼人2483693 2023-07-20 15:44:56
我有一個(gè)由 JS 文件中的一些 JSON 填充的表。data.js 看起來(lái)像這樣：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"  }];數(shù)據(jù)在我的functions.js 文件中的JS 函數(shù)中讀?。▽?xiě)入實(shí)際的表行）。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);    }  }}我想要弄清楚的是如何允許每個(gè)項(xiàng)目的鏈接使用不同的模板文件。我在上面的 HREF 中編寫(xiě)了一些虛擬代碼，但這顯然不正確。對(duì)于模板，我有兩個(gè)：video.html 和 image.html。我想將所點(diǎn)擊的索引的文件名作為參數(shù)傳遞到模板文件中，以便它可以顯示正確的文件，但我不確定該怎么辦？例如，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 回答

?
滄海一幻覺(jué)

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

您在這里重復(fù)了很多事情，導(dǎo)致它沒(méi)有得到優(yōu)化。如果你會(huì)使用函數(shù)，請(qǐng)使用它們！如果沒(méi)有，更好的方法是：


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);

? }

}

在上面的代碼中：

  1. 看看我是如何在第 4 行添加文件的。

  2. 在第 7 行執(zhí)行 MOV 與 PNG 的操作。

對(duì)于模板化的事情，使用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>


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 141 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)