javascript - 可以在文本文件中调用 html 和 css 标签吗？

Question

第一个问题在这里!所以，我刚开始学习，我在谷歌上搜索过，但没有发现任何关于这种情况的信息:

我正在开发一个包含大量文件的网站(同一页面上超过 500 个文件，这是一个卡片列表)。如果我写下这些图像的所有标签，代码就会一团糟。

我想知道是否可以创建一个包含所有 img 标签的“.txt”文件，并通过 JavaScript 或 jQuery 进行调用，以便它们显示在屏幕上。例如:

<div class="tab-pane fade in active" role="tabpanel" id="all-cards">
                <img src="../img/cards/en-gb/xln-cards/black/fatom-fleet-captain.png">
                <img src="../img/cards/en-gb/xln-cards/blue/kopala-warden-of-waves.png">
                <img src="../img/cards/en-gb/xln-cards/green/colossal-dreadmaw.png">
                <img src="../img/cards/en-gb/xln-cards/red/bonded-horncrest.png">
                <img src="../img/cards/en-gb/xln-cards/white/adanto-vanguard.png">
                <img src="../img/cards/en-gb/xln-cards/multicolored/admiral-beckett-brass.png">
                <img src="../img/cards/en-gb/xln-cards/artifacts/pirate's-cutlass.png">
                <img src="../img/cards/en-gb/xln-cards/lands/unknow-shores.png">
            </div>

将所有这些放在 .txt 上并在该页面上调用“cards-database.html”。

谢谢!

Answer 1

当然，将它们存储在服务器上的 JSON 文件中:

[
 "black/fatom-fleet-captain",
 "blue/kopala-warden-of-waves",
 "green/colossal-dreadmaw"
]

然后使用 fetch() 请求该文件(在我看来，比 $.ajax 略短)，遍历列表并使用 $.append() 构建图像标签:

fetch('list-of-images.json')
 .then(response => response.json())
 .then(images => {
   for (let card of images) {
     $('#all-cards').append(`<img src="../img/cards/en-gb/xln-cards/${card}.png">`)
   }
 }
})

但正如 Daniel 指出的那样，这样做并没有特别的优势。事实上，您的性能会受到影响，因为您必须加载页面，然后加载图像列表，然后开始获取图像。

更好的想法是将数组直接存储在执行附加循环的脚本文件中，例如:

const images = [
  "black/fatom-fleet-captain",
  "blue/kopala-warden-of-waves",
  "green/colossal-dreadmaw"
];

for (let card of images) {
    $('#all-cards').append(`<img src="../img/cards/en-gb/xln-cards/${card}.png">`)
}

附加:

不要将您的条目存储两次。我本来打算在原来的答案中提出这个建议，但懒惰了。

只需将您的卡片存储为对象其键是颜色，并将卡片名称存储为每种颜色内的数组:

const cards = {
    "black": [
        "fatom-fleet-captain"
    ],
    "blue": [
        "kopala-warden-of-waves"
    ],
    "green": [
        "colossal-dreadmaw"
    ]
};

然后你可以得到只有一种颜色的卡片:

// Get all the black cards
for (const card of cards.black) console.log(`black/${card}.png`)

或者您可以展平对象以将所有卡片放在一个数组中，这里我使用了 for...of和 for...in为了清楚起见，还有一个额外的数组:

const all_cards = [];
for (let colour in cards) {
  for (let card of cards[colour]) all_cards.push(`/${colour}/${card}.png`)
}

根据需要进行调整。

您可能正在查看 cosnt在 const all_cards = [] 中并想知道它是如何工作的。请注意，const 会阻止重新分配(意味着 =)，而不是像推送到数组或改变对象属性这样的操作。