jQuery - Loop through and display images in an array with certain property value for specified time

Question

My goal is to display a deck of cards on a webpage. There will be one button on the page per suit of cards, so four buttons for Hearts, Diamonds, Clubs, Spades, respectively. Wh

Answer 1

"I'm guessing they need to be placed in different array once they are displayed"

I would do it the other way around. That is, when the button is clicked, put all of the cards for the current suit into an array (easy with the .filter() method), and then remove them from that array one by one as they are displayed, using the .splice() method. When the array is empty, stop.

I've made some other "improvements" too:

• Created your deck with nested loops, rather than having to list all 52 cards individually.
• Removed the button elements' id attributes, instead giving them a common class and a data-suit attribute. The click handler is then bound using the class, and retrieves the relevant suit from the data-suit attribute.

$(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
        $("<img>").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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
    <h1>Press a button to display each card in the suit</h1>
    <ul>
        <li>
            <button class="displaySuit" data-suit="Hearts">Show Hearts Cards</button>
        </li>
        <li>
            <button class="displaySuit" data-suit="Diamonds">Show Diamonds Cards</button>
        </li>
        <li>
            <button class="displaySuit" data-suit="Clubs">Show Clubs Cards</button>
        </li>
        <li>
            <button class="displaySuit" data-suit="Spades">Show Spades Cards</button>
        </li>
    </ul>
    <div id="displayArea">
    </div>
</div>

Answer 2

You are checking for index in displayedCards which will always return -1 as you are pushing the object into it not the index. So the line of code

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

Should be

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