使用了很多if語句，我不能只使用一個循環嗎？

Question

我正在學習一些javascript。目前我已經創建了一個工作腳本，我認爲代碼可以比我創建的代碼小很多/更聰明。我有什麼： 我有5個不同ID的5個div。帶有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是空的，或者（如果有卡）檢查如果卡低於當前卡。如果是這樣，推卡那一堆，如果沒有，檢查第二樁等等等等

要使用大量的做到這一點，我創建的代碼，如果語句：

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將卡推到哪裏。我認爲這可以做得更容易。也許只有一個丟棄功能，並用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)"); 
    } 

同樣，我認爲這是可以簡化代碼，我只是不知道如何做到這一點。如果你提供工作代碼，請說明你做了什麼以及爲什麼這樣我就可以從它

感謝學到了很多

UPDATE：

的div使用postioned變量「s：

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