jQuery - 如何按顺序循环遍历数组，以便一次只显示具有特定属性值的图像

Question

我无法让代码工作。我不完全确定我的函数displayHeartCards()是正确的，并且我在控制台中收到错误，当我结束(document).ready函数时，最后会有一个额外的括号

我正在尝试在网页上显示一副牌。每套卡片上都会有一个按钮，分别为Hearts，Diamonds，Clubs，Spades四个按钮。当点击显示所有心形卡片的按钮时，我想显示每张心形卡片，从ace开始，按顺序一次一个，在div id＆＃34; displayArea＆＃34;中各3秒。这些卡不能多次显示。一旦显示了所有52张卡片，我希望屏幕留空。我的图像相对于我的index.html文件存储在＆＃34; images / cards / Hearts / Ace.jpg＆＃34;。

到目前为止，这是我的代码：

$(document).ready(function(){

    var i;

    //card object
    function card(name,suit) {
        this.name = name;
        this.suit = suit;
    }; 

    var deck = [
        new card('Ace', 'Hearts'),
        new card('Two', 'Hearts'),
        new card('Three', 'Hearts'),
        new card('Four', 'Hearts'),
        new card('Five', 'Hearts'),
        new card('Six', 'Hearts'),
        new card('Seven', 'Hearts'),
        new card('Eight', 'Hearts'),
        new card('Nine', 'Hearts'),
        new card('Ten', 'Hearts'),
        new card('Jack', 'Hearts'),
        new card('Queen', 'Hearts'),
        new card('King', 'Hearts'),
        new card('Ace', 'Diamonds'),
        new card('Two', 'Diamonds'),
        new card('Three', 'Diamonds'),
        new card('Four', 'Diamonds'),
        new card('Five', 'Diamonds'),
        new card('Six', 'Diamonds'),
        new card('Seven', 'Diamonds'),
        new card('Eight', 'Diamonds'),
        new card('Nine', 'Diamonds'),
        new card('Ten', 'Diamonds'),
        new card('Jack', 'Diamonds'),
        new card('Queen', 'Diamonds'),
        new card('King', 'Diamonds'),
        new card('Ace', 'Clubs'),
        new card('Two', 'Clubs'),
        new card('Three', 'Clubs'),
        new card('Four', 'Clubs'),
        new card('Five', 'Clubs'),
        new card('Six', 'Clubs'),
        new card('Seven', 'Clubs'),
        new card('Eight', 'Clubs'),
        new card('Nine', 'Clubs'),
        new card('Ten', 'Clubs'),
        new card('Jack', 'Clubs'),
        new card('Queen', 'Clubs'),
        new card('King', 'Clubs'),
        new card('Ace', 'Spades'),
        new card('Two', 'Spades'),
        new card('Three', 'Spades'),
        new card('Four', 'Spades'),
        new card('Five', 'Spades'),
        new card('Six', 'Spades'),
        new card('Seven', 'Spades'),
        new card('Eight', 'Spades'),
        new card('Nine', 'Spades'),
        new card('Ten', 'Spades'),
        new card('Jack', 'Spades'),
        new card('Queen', 'Spades'),
        new card('King', 'Spades')
    ];

    function displayHeartCards(){
        for (i = 0; i<12; i++){
            var c = deck[i];
            if(c.suit == "Hearts"){
                $("<img>").attr('src','images/cards/' + c.suit + '/' + c.name + '.jpg')
                    .appendTo("#displayArea")
                    .fadeIn('slow')
                    .delay(300)
                    .fadeOut('slow');
                displayedCards.push(c);
        };
    };

    $("#btnHearts").click(function(){
        displayHeartCards();
    });
    $("#btnDiamonds").click(function(){
        display();
    });
    $("#btnClubs").click(function(){
        display();
    });
    $("#btnSpades").click(function(){
        display();
    });
});

HTML：

<div id="main">
    <h1>Press a button to display each card in the suit</h1>
    <ul>
        <li>
            <button id="btnHearts">Show Hearts Cards</button>
        </li>
        <li>
            <button id="btnDiamonds">Show Diamonds Cards</button>
        </li>
        <li>
            <button id="btnClubs">Show Clubs Cards</button>
        </li>
        <li>
            <button id="btnSpades">Show Spades Cards</button>
        </li>
    </ul>
    <div id="displayArea">
    </div>
</div>

我不得不重新发布这个，因为说实话我不清楚我第一次需要什么，而且我的代码非常草率。谢谢。