我有一个页面显示了很多Magic:The Gathering卡片,它们的内容显示有标签。我有各种类型卡片的标签。我不太熟悉JavaScript,但在这里帮助我创建并改编了一个JS文件,根据它们的类型从目录加载所有MTG卡(Magic:The Gathering游戏的PNG文件),上面我展示了一个土地的例子卡:
`const land_cards = [
"lands/dragonskull-summit",
"lands/drowned-catacomb",
"lands/field-of-ruin",
"lands/glacial-fortress",
"lands/rootbound-crag",
"lands/unclaimed-territory",
"lands/unknow-shores"
];
for (let card of land_cards) {
$('#land-cards').append('<img src="../img/cards/en-gb/xln-cards/${card}.png">')
}`
这个脚本运行良好,但只有一个问题:当我进入此页面(card-database.html)时,所有卡片都会同时加载,并且卡片数量巨大我在这里我的问题是:当我进入此页面时,我可以编辑它只加载选定的标签内容吗?例如:
实际情况:我在card-database.html上输入,所有500张卡同时加载,&#34;黑卡&#34;选项卡默认选中。
通缉情况:我进入card-database.html并且只加载选定的标签卡(黑卡),如果我点击另一个标签(例如土地卡),它将加载所有土地卡。
如果需要,请点击页面代码:
<!-- TAB MENU -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#black-cards" role="tab" data-toggle="tab">Black</a></li>
<li><a href="#blue-cards" role="tab" data-toggle="tab">Blue</a></li>
<li><a href="#green-cards" role="tab" data-toggle="tab">Green</a></li>
<li><a href="#red-cards" role="tab" data-toggle="tab">Red</a></li>
<li><a href="#white-cards" role="tab" data-toggle="tab">White</a></li>
<li><a href="#multicolored-cards" role="tab" data-toggle="tab">Multicolored</a></li>
<li><a href="#artifacts-cards" role="tab" data-toggle="tab">Artifacts</a></li>
<li><a href="#land-cards" role="tab" data-toggle="tab">Lands</a></li>
</ul>
<!-- TAB CONTENT -->
<div class="tab-content">
<!-- TAB BLACK CARDS CONTENT -->
<div class="tab-pane fade in active" role="tabpanel" id="black-cards">
</div>
<!-- TAB BLUE CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="blue-cards">
</div>
<!-- TAB GREEN CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="green-cards">
</div>
<!-- TAB RED CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="red-cards">
</div>
<!-- TAB WHITE CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="white-cards">
</div>
<!-- TAB MULTICOLORED CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="multicolored-cards">
</div>
<!-- TAB ARTIFACTS CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="artifacts-cards">
</div>
<!-- TAB LANDS CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="land-cards">
</div>
</div>
<!-- TAB CONTENT -->
你们可以帮助我吗?我可以使用任何建议或材料来实现这一目标吗?
谢谢!
答案 0 :(得分:0)
这应该有效。 添加所有类型的图像并完成列表。
const cards ={
lands:[
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_jokerblack-128.png",
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_jokerblack-128.png",
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_jokerblack-128.png",
],
black:[
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_acespad-256.png",
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_acespad-256.png",
"https://cdn4.iconfinder.com/data/icons/poker-cards/512/card_acespad-256.png",
],
blue:[
"https://cdn3.iconfinder.com/data/icons/poker-cards-1/154/poker-card-two-red-256.png",
"https://cdn3.iconfinder.com/data/icons/poker-cards-1/154/poker-card-two-red-256.png",
"https://cdn3.iconfinder.com/data/icons/poker-cards-1/154/poker-card-two-red-256.png",
],
//....
};
$('.card-type').on('click',function(ev){
$('.tab-pane').empty();
let type = $(ev.target).data('type');
for (let card of cards[type]) {
$('#'+type+'-cards').append('<img src="'+card+'">')
//$('#'+type+'-cards').append('<img src="../img/cards/en-gb/xln-cards/${card}.png">')
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TAB MENU -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#black-cards" data-type='black' class="card-type" role="tab" data-toggle="tab">Black</a></li>
<li><a href="#blue-cards" class="card-type" data-type='blue' role="tab" data-toggle="tab">Blue</a></li>
<!-- add the others-->
<li><a href="#land-cards" class="card-type" role="tab" data-type='lands' data-toggle="tab">Lands</a></li>
</ul>
<!-- TAB CONTENT -->
<div class="tab-content">
<!-- TAB BLACK CARDS CONTENT -->
<div class="tab-pane fade in active" role="tabpanel" id="black-cards">
</div>
<!-- TAB BLUE CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="blue-cards">
</div>
<!-- TAB GREEN CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="green-cards">
</div>
<!-- TAB RED CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="red-cards">
</div>
<!-- TAB WHITE CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="white-cards">
</div>
<!-- TAB MULTICOLORED CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="multicolored-cards">
</div>
<!-- TAB ARTIFACTS CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="artifacts-cards">
</div>
<!-- TAB LANDS CARDS CONTENT -->
<div class="tab-pane fade" role="tabpanel" id="lands-cards">
</div>
</div>
<!-- TAB CONTENT -->
&#13;