當我在頁面上輸入時，如何僅加載特定的選項卡內容（JS文件）

Question

我的頁面上顯示了很多魔術：收集卡片及其內容均通過標簽顯示。 我有每種卡的標簽。 我對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張卡，默認情況下選擇了“黑卡”選項卡。

• 想要的情況：我在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

這應該工作。 添加所有類型的圖像並完成列表。

 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">') } }); 

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