我正在学习一些 JavaScript。目前，我已经创建了一个工作脚本，我认为该脚本的代码可以比我创建的代码小得多/更智能。
我有什么: 我有 5 个 div，有 5 个不同的 ID。 ID 为foundationPile 的div 堆叠了几张扑克牌。 HTML 看起来像这样:
<div id="foundationPile">
Card pile
</div>
<div id="discardPile">
Foundation 1
</div>
<div id="discardPile2">
Foundation 2
</div>
<div id="discardPile3">
Foundation 3<
</div>
<div id="discardPile4">
Foundation 4
</div>
我编写的代码执行以下操作:当单击foundationPile div中的卡片时，会检查discardPile1是否为空，或者(如果有卡片)检查该卡片是否低于当前卡片。如果是，则将牌推到该堆，如果没有，则检查第二堆，依此类推。
为此，我创建了包含大量 if 语句的代码:
function play( card ){
if( discardPile.length ){
var lastDiscard = discardPile[discardPile.length-1];
if( card.val == lastDiscard.val+1 )
discard( card );
else if( discardPile2.length ){ //NEW START2
var lastDiscard = discardPile2[discardPile2.length-1];
if( card.val == lastDiscard.val+1 )
discard2( card );
else if( discardPile3.length ){ //NEW START3
var lastDiscard = discardPile3[discardPile3.length-1];
if( card.val == lastDiscard.val+1 )
discard3( card );
else if( discardPile4.length ){ //NEW START4
var lastDiscard = discardPile4[discardPile4.length-1];
if( card.val == lastDiscard.val+1 )
discard4( card );
}
else if( card.val == 1) {
discard4( card );
} //NEW END4
}
else if( card.val == 1) {
discard3( card );
} //NEW END 3
}
else if( card.val == 1) {
discard2( card );
} //NEW END2
}
else if( card.val == 1) { //NEW if empty ACE is allowd
discard( card );
}
}
现在，通过循环遍历 div 的方式而不是使用 if 语句检查每个div，不是可以让我的生活更轻松吗？如果是这样，该怎么做？
这不是全部代码，我还有丢弃函数。目前我已经编写了 4 个丢弃函数。这些基本是一样的，唯一的区别是ID将卡推到哪里。我认为这也可以更容易完成。也许只需要 1 个丢弃函数并将 nr 替换为 this 左右？另外，如何做到这一点？
这些是我当前的丢弃函数:
function discard( card ){
var el = getHtml( card );
var card = cols[card.col].pop();
var col = cols[card.col]; //NEW flip kaart eronder
var flipCard = col[col.length-1]; //NEW flip de kaart eronder
if( (col.length-1) > -1 ){ //NEW
flipUp( flipCard ); //NEW
}
discardPile.push( card );
card.location = 'discardPile';
zindex( el, discardPile.length );
if( discardPile.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
el.css("transform","translate("+discardPos.left+"px, "+discardPos.top+"px)");
}
function discard2( card ){ //NEW
var el = getHtml( card );
var card = cols[card.col].pop();
var col = cols[card.col]; //NEW flip kaart eronder
var flipCard = col[col.length-1]; //NEW flip de kaart eronder
if( (col.length-1) > -1 ){ //NEW
flipUp( flipCard ); //NEW
}
discardPile2.push( card );
card.location = 'discardPile2';
zindex( el, discardPile2.length );
if( discardPile2.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
el.css("transform","translate("+discardPos2.left+"px, "+discardPos2.top+"px)");
}
function discard3( card ){ //NEW
var el = getHtml( card );
var card = cols[card.col].pop();
var col = cols[card.col]; //NEW flip kaart eronder
var flipCard = col[col.length-1]; //NEW flip de kaart eronder
if( (col.length-1) > -1 ){ //NEW
flipUp( flipCard ); //NEW
}
discardPile3.push( card );
card.location = 'discardPile3';
zindex( el, discardPile3.length );
if( discardPile3.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
el.css("transform","translate("+discardPos3.left+"px, "+discardPos3.top+"px)");
}
function discard4( card ){ //NEW
var el = getHtml( card );
var card = cols[card.col].pop();
var col = cols[card.col]; //NEW flip kaart eronder
var flipCard = col[col.length-1]; //NEW flip de kaart eronder
if( (col.length-1) > -1 ){ //NEW
flipUp( flipCard ); //NEW
}
discardPile4.push( card );
card.location = 'discardPile4';
zindex( el, discardPile4.length );
if( discardPile4.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
el.css("transform","translate("+discardPos4.left+"px, "+discardPos4.top+"px)");
}
同样，我认为可以简化代码，我只是不知道如何做到这一点。如果您提供工作代码，请解释您做了什么以及为什么这样我可以从中学习
非常感谢
更新:
div 使用变量进行定位:
var wastePos = {
'left': x_offset * (NUM_COLS-6), //NEW
'top': 0
};
var discardPos = {
'left': x_offset * (NUM_COLS-4), //NEW
'top': 0
};
var discardPos2 = {
'left': x_offset * (NUM_COLS-3), //NEW
'top': 0
};
var discardPos3 = {
'left': x_offset * (NUM_COLS-2), //NEW
'top': 0
};
var discardPos4 = {
'left': x_offset * (NUM_COLS-1), //NEW
'top': 0
};
最佳答案
我不确定您将如何简化所有 if 语句。然而，你的丢弃函数肯定还有优化的空间。只需将discardPile、discardPileName 和discardPos 作为附加参数传递即可。
function discard( card, myDiscardPile, discardPileName, myDiscardPos ){
var el = getHtml( card );
var card = cols[card.col].pop();
var col = cols[card.col]; //NEW flip kaart eronder
var flipCard = col[col.length-1]; //NEW flip de kaart eronder
if( (col.length-1) > -1 ){ //NEW
flipUp( flipCard ); //NEW
}
myDiscardPile.push( card );
card.location = discardPileName;
zindex( el, discardPile.length );
if( myDiscardPile.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
el.css("transform","translate("+myDiscardPos.left+"px, "+myDiscardPos.top+"px)");
}
然后你可以这样调用它:
discard( card, discardPile2, 'discardPile2', discardPos2);
关于javascript - 使用了很多 if 语句，我不能只使用循环吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32822322/