爲什麼我的if else語句不起作用？ jquery

Question

我有一個if else語句應該隱藏/顯示其他列表項目被添加/刪除時的列表項目。它只在if語句放在＃delete-square函數後面才起作用，但它只適用於一個列表項。這裏是我的小提琴：http://jsfiddle.net/matty91/zqmps11b/6/

這可能真的很簡單，但我不知道javascript/jquery那麼好。

示例：因此，對於添加的每個藍色方塊，拿走一個綠色方塊。總是應該有4個方格。 （如果我有2藍色，我應該有2綠色，如果我有4藍色，那麼我應該沒有綠色，用戶應該能夠添加儘可能多的藍色方塊，但如果藍色方塊低於3，則添加1綠色）希望這是有道理的:)

讓我知道如果我需要解釋更多我想要完成的！

在此先感謝！

$(document).ready(function(){ 
 
    \t \t if ($("ul.db-view-list li .quad #chart_div").length == 1){ 
 
     $("li.ph:last-child").hide(); 
 
    } else if($("ul.db-view-list li .quad #chart_div").length == 2){ 
 
     $("li.ph:nth-child(2)").hide(); 
 
    } else if($("ul.db-view-list li .quad #chart_div").length == 3){ 
 
     $("li.ph:nth-child(1)").hide(); 
 
    } else if($("ul.db-view-list li .quad #chart_div").length >= 4){ 
 
     $("li.ph:first-child").hide(); 
 
    } else { 
 
     $("li.ph").show(); 
 
    }; 
 
    $(".add-square").click(function(){ 
 
    $(".db-view-list").prepend("<li><button id='delete-square'>X</button><div class='quad'><div id='chart_div'></div></div></li>"); 
 
    $(document).on('click', '#delete-square', function(){ 
 
    \t $(this).parent().remove(); 
 
    \t }); 
 
    }); 
 
});

.db-view-list{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    height: 300px; 
 
} 
 

 
.db-view-list li{ 
 
    padding:0px; 
 
    list-style-type: none; 
 
} 
 

 
.quad{ 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
.default-message{ 
 
    background-color: green; 
 
    border: solid 1px white; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin:0px; 
 
    padding: 0px; 
 
} 
 

 
#chart_div{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    border: solid 1px white; 
 
} 
 

 
#delete-square{ 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="db-view-list"> 
 
    <li class="ph"> 
 
    <div class="quad"> 
 
     <p class="default-message"> 
 
     click add square to add a graph first 
 
     </p> 
 
    </div> 
 
    </li> 
 
    <li class="ph"> 
 
    <div class="quad"> 
 
     <p class="default-message"> 
 
     click add square to add a graph 2 
 
     </p> 
 
    </div> 
 
    </li> 
 
    <li class="ph"> 
 
    <div class="quad"> 
 
     <p class="default-message"> 
 
     click add square to add a graph 3 
 
     </p> 
 
    </div> 
 
    </li> 
 
    <li class="ph"> 
 
    <div class="quad"> 
 
     <p class="default-message"> 
 
     click add square to add a graph last 
 
     </p> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<button class="add-square"> 
 
    add square 
 
</button>

Answer 1

http://jsfiddle.net/zqmps11b/28/

牢記CSS也會更改，以適應課程，而不是標識。

您的if語句被設置爲僅在document.ready上進行檢查，而document.ready只出現一次。這應該工作：

var numOfNewBoxes = 0; 
// declare variable to count new boxes. 

$(document).ready(function() { 
// the if/else statement should be removed from the document.ready function 
//You're not reloading the page every time you tap the 'add square button 

    //change the ids to classes because there should only be 1 instance of each ID. 
    $(".add-square").click(function() { 
    $(".db-view-list").prepend("<li><button class='delete-square'>X</button><div class='quad'><div class='chart_div'></div></div></li>"); 
    //hide the last of the original boxes that are visible 
    $('.default-message:visible:last').hide(); 
    numOfNewBoxes ++; 
    //remove any old on click events attached to the class delete-square 
    $('.delete-square').off('click'); 
    //assign the event to the delete square class only - not the document. 
    //This stops the event from continuously firing on click. 
    $('.delete-square').on('click', function() { 


     numOfNewBoxes --; 
     //show the first of the original boxes if they are hidden 
     // only if there are < 4 new boxes; 
     $(this).parent().remove(); 
     (numOfNewBoxes < 4) ? ($('.default-message:hidden:first').show()) : false; 


    }); 
    }); 
}); 

Answer 2

，因爲你需要有一個以上的chart_div和delete_button，你不能使用，作爲一個id。使用類，而不是：

$(document).ready(function() { 
     var chartDivs = $("ul.db-view-list li .quad .chart_div"); 
     if (chartDivs.length == 1) { 
      $("li.ph:last-child").hide(); 
     } else if (chartDivs.length == 2) { 
      $("li.ph:nth-child(2)").hide(); 
     } else if (chartDivs.length == 3) { 
      $("li.ph:nth-child(1)").hide(); 
     } else if (chartDivs.length >= 4) { 
      $("li.ph:first-child").hide(); 
     } else { 
      $("li.ph").show(); 
     } 
     ; 
     $(".add-square").click(function() { 
      $(".db-view-list").prepend("<li><button class='delete-square'>X</button><div class='quad'><div class='chart_div'></div></div></li>"); 

     }); 
     //this will apply to .delete-squares created in the future 
     //so you can just do it once. 
     $(document).on('click', '.delete-square', function() { 
      $(this).parent().remove(); 
     }); 
    }); 

Answer 3

我相信你也應該把，如果在一個函數/ else語句，並有每當您刪除或添加一個div它執行。現在，if/else語句只執行一次：文檔準備就緒。