Question

我有一个if else语句，当附加/删除其他列表项时，它应该隐藏/显示列表项。它只适用于我在＃delete-square函数之后放置if else语句但它只适用于一个列表项。这是我的小提琴：http://jsfiddle.net/matty91/zqmps11b/6/

这可能很简单，但我不太了解javascript / jquery。

示例：因此，对于添加的每个蓝色方块，请取下绿色方块。应该总是有4个方格。（如果我有2个蓝色，我应该有2个绿色。如果我有4个蓝色，那么我应该没有绿色。用户应该能够添加任意数量的蓝色方块，但如果蓝色方块低于3，则添加1个绿色）希望这是有道理的:)）

如果我需要解释一下我想要完成的事情，请告诉我们！

提前致谢！

＆＃13;

$(document).ready(function(){
  		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(){
    	$(this).parent().remove();
  	}); 
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

由于您需要有多个chart_div和delete_button，因此不能将其用作id。改为使用一个类：

<div id="container1">
<div id="svgcontainer"></div>
</div>

Answer 2

我相信你也应该将if / else语句放在一个函数中，并在删除或添加div时执行它。现在，if / else语句只执行一次：当文档准备就绪时。

Answer 3

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

请记住，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;


    });
  });
});

为什么我的if else声明不起作用？ jQuery的

3 个答案: