当我在页面

时间:2018-05-03 22:31:35

标签: javascript html css json

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

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

谢谢!

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;