Javascript 它'；可以在文本文件中调用html和css标记吗？

第一个问题！所以，我刚开始学习，我在谷歌上搜索过，没有发现任何关于这个场景的信息：

我正在开发一个包含很多文件的网站（同一页面上有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”

---

谢谢大家!

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

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

然后使用（在我看来，略短于

$.ajax

）请求该文件，遍历列表并使用以下内容构建图像标记：

然后你可以得到一种颜色的卡片：

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

或者，您可以将对象展平以获得一个阵列中的所有卡片，为了清晰起见，这里我使用了一个额外的阵列：

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

根据需要进行调整

---

您可能会在

const all_cards=[]

中看到这一点，并想知道这是如何工作的。请注意，

const

防止重新分配（意思是

=

），而不是像推送到数组或改变对象属性这样的操作。

如果您计划跨多个页面重用图像列表，则将URL存储为JSON数据（而不是.txt文件）并通过ajax调用访问它是有意义的。但是，如果这只是一个页面，那么这样做没有什么特别的好处。你好，丹尼尔，谢谢你的回答！我计划只在该页面上执行，如果响应以

.json

结尾，是否执行

获取

自动转换为json？否则你需要

然后（response=>response.json（））。然后（images…

@xdumaine这是一个很好的观点：它没有。我在角度自动解析领域太深了。谢谢。你好，谢谢你的回答！：）它很有魅力，谢谢你！但是我还有一个问题：我正在使用标签（引导），这个脚本只让活动标签显示内容。如何向其他选项卡显示内容？这是我的代码：

等等。。如果我没有要求太多，你能详细解释一下这个把戏是如何起作用的吗？我是JS/jQuery的新手。非常感谢你！抱歉@msanford，我还在习惯stackoverflow社区！谢谢：D这里有一个代码的screeshot，让它更简单：问题是其他选项卡，它们没有内容，因为我删除了on代码的行，它们仍然在活动/主选项卡（所有卡）上工作。我怎样才能使它们再次出现在其他选项卡上？@msanford嘿，我明白了！我刚刚在脚本上创建了另一行，并将脚本最后一部分中的#id改为另一个#id:

const all#u cards=[“黑色/法托姆舰队船长”，“蓝色/科帕拉波浪守护者”]；康斯特黑卡=[“黑卡/法托姆机长”]；对于（所有卡片中的卡片）{$（'.'所有卡片'）。附加（

）}对于（黑色卡片中的卡片）{$（'.'黑色卡片'）。附加（

）}

非常感谢！

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

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