Javascript 为什么我的if-else语句不起作用？jquery

我有一个if-else语句，它应该在附加/删除其他列表项时隐藏/显示列表项。仅当我将if else语句放在#delete square函数之后时，它才起作用，但它只对一个列表项起作用。这是我的小提琴：

这可能非常简单，但我对javascript/jquery不太了解

示例：因此，对于添加的每个蓝色正方形，都要去掉一个绿色正方形。应该始终有4个正方形。（如果我有2个蓝色方块，我应该有2个绿色方块。如果我有4个蓝色方块，我应该没有绿色方块。用户应该能够添加他想要的蓝色方块，但是如果蓝色方块低于3，那么添加1个绿色方块）希望这是有意义的：）

让我知道如果我需要解释一点更多的我试图实现

提前谢谢

$（文档）.ready（函数（）{
if（$（（$）ul.db-view-list li.quad#chart_div”）.length==1）{
$（“li.ph:最后一个孩子”）.hide（）；
}else if（$（（$）ul.db-view-list li.quad#chart_div”）。长度==2）{
$（“li.ph:nth child（2）”）.hide（）；
}else if（$（（$）ul.db-view-list li.quad#chart_div”）。长度==3）{
$（“li.ph:nth child（1）”）.hide（）；
}else if（$（（$）ul.db-view-list li.quad#chart_div”）。长度>=4）{
$（“li.ph:第一个孩子”）.hide（）；
}否则{
$（“li.ph”）.show（）；
};
$（“.add square”）。单击（函数（）{
$（“.db视图列表”）.prepend（“
X
”）；
$（文档）。在（'单击'，'删除方块'，函数（）上）{
$（this.parent（）.remove（）；
}); 
});
});
.db视图列表{
填充：0px；
边际：0px；
高度：300px；
}
.db视图列表li{
填充：0px；
列表样式类型：无；
}
.四{
宽度：100px；
高度：100px；
浮动：左；
}
.默认消息{
背景颜色：绿色；
边框：纯色1px白色；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
#图表组{
宽度：100%；
身高：100%；
背景颜色：蓝色；
边框：纯色1px白色；
}
#删除方块{
位置：绝对位置；
}




单击“添加正方形”以首先添加图形




单击“添加正方形”以添加图形2




单击“添加正方形”以添加图形3




单击“添加正方形”最后添加一个图形



加方块
由于您需要有多个图表div和delete按钮，因此不能将其用作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();
        });
    });

$（文档）.ready（函数（）{
var chartDivs=$（“ul.db-view-list li.quad.chart_div”）；
如果（chartDivs.length==1）{
$（“li.ph:最后一个孩子”）.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:第一个孩子”）.hide（）；
}否则{
$（“li.ph”）.show（）；
}
;
$（“.add square”）。单击（函数（）{
$（“.db视图列表”）.prepend（“
X
”）；
});
//这将适用于。删除将来创建的正方形
//所以你可以只做一次。
$（文档）。在（'单击'，'上。删除方形'，函数（）{
$（this.parent（）.remove（）；
});
});
我认为您还应该将if/else语句放在函数中，并在删除或添加div时执行它。现在，if/else语句只执行一次：当文档准备就绪时。

请记住，CSS也会改变，以适应类而不是ID

您的if语句设置为仅在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;


    });
  });
});

var numofnewbox=0；
//声明变量以计数新框。
$（文档）.ready（函数（）{
//应该从document.ready函数中删除if/else语句
//您没有在每次点击“添加方形”按钮时重新加载页面
//将ID更改为类，因为每个ID应该只有一个实例。
$（“.add square”）。单击（函数（）{
$（“.db视图列表”）.prepend（“
X
”）；
//隐藏最后一个可见的原始框
$（'.default message:visible:last'）.hide（）；
numOfNewBoxes++；
//删除附加到类delete square的所有旧的单击事件
$（'.delete square'）.off（'click'）；
//仅将事件分配给delete square类，而不是文档。
//这将阻止事件在单击时持续触发。
$（'.delete square'）。在（'click'，函数（）{
纽牛--；
//显示第一个原始框（如果隐藏）
//仅当有<4个新箱子时；
$（this.parent（）.remove（）；
（numOfNewBox<4）（$（'.默认消息：hidden:first'）.show（））：false；
});
});
});
您没有ID为
chart\u div
的任何东西，并且ID只能使用一次，因此如果您有多个ID的东西，它将只选择其中一个。是的，请详细解释。当我点击“添加正方形”按钮时，它正在添加一个正方形！当我点击“X”时，它会移除正方形！Matty你是说你希望屏幕上只有4个盒子？因此，当添加一个时，它会隐藏最旧的？@MikeC是的，我有一个图表div。它在.add square click函数前面。我不知道身份证只能用一次。我以为那只是css的。谢谢你的提示。@AdamJeffers我将更新我的问题，并提供更多细节。这与我想要的非常接近！谢谢一个简单的问题：在JSFIDLE中，如果我添加3个蓝色，然后删除2个蓝色，那么我应该有1个蓝色和3个绿色。出于某种原因，这是布林