Question

我正在学习一些javascript。目前我已经创建了一个工作脚本，我认为代码可以比我创建的更小/更聪明。

我拥有的：我有5个div，有5个不同的ID。带ID的div：foundationPile有几张扑克牌堆叠在一起。 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语句检查每一个来让我的生活更轻松？如果是这样，怎么做？

这不是所有的代码，我也有丢弃功能。目前我已经写了4个丢弃函数。这些基本相同，唯一的区别是ID在哪里推卡。我认为这也可以更容易。也许只有1个丢弃函数并用this左右替换nr？另外，怎么做？

这些是我目前的丢弃功能：

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)");
    }

同样，我认为可以简化代码，我只是不知道如何做到这一点。如果您提供工作代码，请说明您的工作以及为什么我可以从中学习

非常感谢

更新

使用变量“s：

来提示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
    };

Answer 1

我不确定如何简化所有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);

使用了很多if语句，我不能只使用一个循环吗？

1 个答案: