javascript - jQuery - 在指定时间内循环并显示具有特定属性值的数组中的图像

Question

我的目标是在网页上显示一副纸牌。每套牌页面上都会有一个按钮，因此分别对应红心、方 block 、梅花、黑桃四个按钮。当单击显示所有红心卡的按钮时，我想在 div id“displayArea”中一次显示每张红心卡 3 秒。这些卡片不能多次显示，所以我猜测一旦显示它们就需要将它们放置在不同的数组中。显示完所有 13 张卡片后，我希望屏幕保持空白。我的图像相对于“img/Hearts/cards/Ace.jpg”中的index.html 文件存储。这是到目前为止我的代码:

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

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

提前谢谢您。

Answer 1

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

我会反过来做。也就是说，当单击该按钮时，将当前花色的所有牌放入一个数组中(使用 the .filter() method 很容易)，然后在显示它们时将它们一张一张地从该数组中删除，使用 the .splice() method 。当数组为空时，停止。

我还做了一些其他“改进”:

• 使用嵌套循环创建您的牌组，而不必单独列出所有 52 张牌。
• 删除了按钮元素的 id 属性，而是为它们提供了一个公共(public)类和一个 data-suit 属性。然后使用该类绑定(bind)点击处理程序，并从 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
        $("<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>