我的目标是在网页上显示一副牌。每套卡片上都会有一个按钮，分别为Hearts，Diamonds，Clubs，Spades四个按钮。当点击显示所有心形卡的按钮时，我想在div id“displayArea”中一次一个地显示每个心脏卡3秒。卡片不能多次显示，所以我猜测它们一旦显示就需要放在不同的阵列中。一旦显示了所有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"){
$("<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>
提前谢谢。
答案 0 :(得分：1)
“我猜他们一旦显示就需要放在不同的数组中 ”
我会反过来做。也就是说，当单击该按钮时，将当前套装的所有卡片放入一个数组中（使用the .filter() method轻松），然后使用{{3将它们逐个从显示中删除}}。当数组为空时，停止。
我也做了一些其他“改进”：
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
$("<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>
答案 1 :(得分：0)
您正在检查index中的displayedCards，当您将对象推入而不是索引时，它将始终返回-1。所以代码行
if(!$.inArray(index, displayedCards) > -1 && deck[index].suit == "Hearts")
应该是
if(!$.inArray(c, displayedCards) > -1 && deck[index].suit == "Hearts")