Question

我试图在他们之间暂停3秒钟的情况下试图通过一副纸牌套装。

<body>
<div id="page-wrap">
    <header>
        <h1>Click a suit and see all of the cards in it.</h1>
    </header>
    <nav>
        <input type="button" id="Hearts" name="Hearts" value="Hearts" />
        <input type="button" id="Diamonds" name="Diamonds" value="Diamonds" />
        <input type="button" id="Clubs" name="Clubs" value="Clubs" />
        <input type="button" id="Spades" name="Spades" value="Spades" />
    </nav>
    <main>
        <p id="CardHere">
            <img src="" />
        </p>
    </main>
    <footer>
        <p id="nameofcard"></p>
    </footer>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
</div>

function ShowCards(DeckStartOfSuit) {

    for (i = DeckStartOfSuit; i < (DeckStartOfSuit + 13) ; i++) {
        var c = deck[i];
        setTimeout(function () { //for the 3 second delay

            $("main img").attr('src', 'images/' + c.suit + '/' + c.name + '.jpg')
                            .attr('alt', c.name + ' of ' + c.suit)
            $("footer p").text(c.name + ' of ' + c.suit)

        }, 3000); // is only happening at the end
    }
}

$("#Hearts").click(function () {
    ShowCards(0);
});

$("#Diamonds").click(function () {
    ShowCards(13);
});

$("#Clubs").click(function () {
    ShowCards(26);
});

$("#Spades").click(function () {
    ShowCards(39);
});

我制作了一副牌组，按钮正在传递套装开始的数组的索引。

function card(name,suit,value) { 
    this.name = name;
    this.suit = suit;
    this.value = value;
} 
var deck = [
    new card('Ace', 'Hearts',11), 
    new card('Two', 'Hearts',2),
...
    new card('King', 'Spades',10)

我遇到的问题是只出现了最后一张图片。每个按钮只会在4秒后出现该套装的王者。

Jquery：循环显示图像只显示最后一张图像

0 个答案: