Question

这里的第一个问题！所以，我在学习之初就已经在谷歌上搜索过，并且没有发现任何关于这种情况的信息：

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

我想知道是否可以创建一个＆＃34; .txt＆＃34;包含所有img标签的文件，并通过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上，并在该页面上调用＆＃34; cards-database.html＆＃34;。

谢谢！

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">`)
   }
 }
})

但正如丹尼尔所说，这样做并没有特别的优势。实际上，您将执行点击，因为您必须加载页面，然后加载图像列表，然后开始获取图像。

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

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`) }

根据需要进行调整。

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

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

1 个答案: