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

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

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

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

 $(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"){ $("").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：

 
 
Press a button to display each card in the suit
 
 
 Show Hearts Cards 
 
 Show Diamonds Cards 
 
 Show Clubs Cards 
 
 Show Spades Cards 
 
 
 
  

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