jQuery – 在指定时间内以特定属性值循环并显示图像

我的目标是在网页上显示一副牌。 每套卡片上都会有一个按钮，分别为Hearts，Diamonds，Clubs，Spades四个按钮。 当点击显示所有心形卡的按钮时，我想在div id“displayArea”中一次一个地显示每个心脏卡3秒。 这些卡不能多次显示，所以我猜它们一旦显示就需要放在不同的arrays中。 一旦显示了所有13张卡片，我希望屏幕留空。 我的图像相对于我的index.html文件存储在“img / Hearts / cards / Ace.jpg”中。 这是我到目前为止的代码：

$(document).ready(function(){ //cards already displayed var displayedCards = new Array(); //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 getRandom(num){ var my_num = Math.floor(Math.random()*num); return my_num; } function displayHeartCards(){ do{ var index = getRandom(52); var c = deck[index]; if(!$.inArray(index, displayedCards) > -1 && deck[index].suit == "Hearts"){ $("").attr('src','images/cards/' + c.suit + '/' + c.name + '.jpg') .appendTo("#displayArea") .fadeOut('slow') .fadeIn('slow'); displayedCards.push(c); } } while { } } $("#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 
 
 
 
  

先感谢您。

Answer 1

“我猜他们一旦显示就需要放在不同的arrays中 ”

我会反过来这样做。 也就是说，当单击该按钮时，将当前套装的所有卡片放入一个数组中（使用.filter()方法很容易），然后使用它将它们从显示中逐个删除.splice()方法 。 当数组为空时，停止。

我也做了一些其他“改进”：

• 用嵌套循环创建你的deck ，而不是单独列出所有52张牌。
• 删除了按钮元素的id属性，而是为它们提供了一个公共类和一个data-suit属性。 然后使用该类绑定单击处理程序，并从data-suit属性中检索相关的诉讼。

 $(document).ready(function(){ function card(name,suit) { this.name = name; this.suit = suit; } var deck = []; var values = ['Ace', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Jack', 'Queen', 'King']; ['Hearts', 'Diamonds', 'Clubs', 'Spades'].forEach(function(suit) { values.forEach(function(value) { deck.push(new card(value, suit)); }); }); function getRandom(num){ return Math.floor(Math.random()*num); } function display(suit){ // Create an array for the current suite: var suitCards = deck.filter(function(c) { return c.suit === suit }); function showNext() { if (suitCards.length === 0) return; // Remove a random card // Note that .splice() returns an array containing the removed item(s) // so use [0] after the () to get the removed card var currentCard = suitCards.splice(getRandom(suitCards.length),1)[0]; // Setting 'alt' rather than 'src' just so that something is // visible in the demo, since the real images aren't available here $("").attr('alt','images/cards/' + currentCard.suit + '/' + currentCard.name + '.jpg') .appendTo("#displayArea") .hide() .fadeIn('slow') .delay(300) .fadeOut('slow', function() { // when finished fading $(this).remove(); // remove the img showNext(); // show next one }); } showNext(); // show first card } $(".displaySuit").click(function(){ display($(this).attr("data-suit")); }); }); 

 h1 { font-size: 14px; } 

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

Answer 2

您正在检查displayedCards中的index ，当您将对象推入而不是索引时，它将始终返回-1。 所以代码行

 if(!$.inArray(index, displayedCards) > -1 && deck[index].suit == "Hearts") 

应该

 if(!$.inArray(c, displayedCards) > -1 && deck[index].suit == "Hearts")