Question

我有一个页面显示了很多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 -->

你们可以帮助我吗？我可以使用任何建议或材料来实现这一目标吗？

谢谢！

Answer 1

这应该有效。添加所有类型的图像并完成列表。

＆＃13;

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;

当我在页面

1 个答案: