javascript - 使用 CSS 和 jQuery 构建金字塔

Question

我正在尝试构建一个非常简单的金字塔构建工具包。用户可以添加 block 或删除 block 。

使用下面的代码可以正常工作。但是，目前我正在使用 css (.item1 {200px;}, .item2 {300px;}) 指定下一个 block 的宽度。问题是，我不知道用户最终会添加多少 block ，因此，我无法指定这在CSS中。我想根据前一个 block 的宽度+ 100px(前一个宽度+ 100px)计算每个额外 block 的宽度。不幸的是，我不知道该怎么做......任何帮助将不胜感激.

simple pyramid pic

$(document).ready(function() {

  //Add Block Functionality
  $('#add-block .button').click(function() {
    var $block = $('<li><div class="item"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
    $('.pyramid').append($block);
    $('ul li div').addClass(function(index) {
      return "item" + index;
    }) //this is to increase the item to item 1, item2, item3 etc.
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
      $('.pyramid li').last().remove();
    }

  )
});

.item {
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.item0 {
  height: 0px;
  width: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #0488e0;
}

li div.item:not(.item0) {
  border-bottom: 60px solid #0488e0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  margin-top: 10px;
  height: 0;
}

.item1 {
  width: 200px;
  /*plus 100px to create the trapezoid*/
}

.item2 {
  width: 300px;
  /*plus 100px to create the trapezoid*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
  <li>
  </li>
</ul>

<section class="buttons">
  <div id="add-block">
    <span>Add Block</span>
    <div class="button">+
    </div>
  </div>
  <div id="remove-block">
    <span>Remove Block</span>
    <div class="button">-
    </div>
  </div>
</section>

Answer 1

你可以获得最后一个 .item 宽度，然后附加你想要的数字 var lastwidth = $('.pyramid li:last-child .item').width();

$(document).ready(function() {

  //Add Block Functionality
  $('#add-block .button').click(function() {
    var lastwidth = $('.pyramid li:last-child .item').width();
    
    if(lastwidth == null){
    var plus = 0;
    } else {
    var plus = lastwidth + 100;
    }
    
    var $block = $('<li><div class="item" style="width:' + plus + 'px"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
    $('.pyramid').append($block);

    
    //$('ul li div').addClass(function(index) {
    //return "item" + index;
    //}) //this is to increase the item to item 1, item2, item3 etc.
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
      $('.pyramid li').last().remove();
    }

  )
});

.item {
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.item0 {
  height: 0px;
  width: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #0488e0;
}

li div.item:not(.item0) {
  border-bottom: 60px solid #0488e0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  margin-top: 10px;
  height: 0;
}

.item1 {
  width: 200px;
  /*plus 100px to create the trapezoid*/
}

.item2 {
  width: 300px;
  /*plus 100px to create the trapezoid*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
  <li>
  </li>
</ul>

<section class="buttons">
  <div id="add-block">
    <span>Add Block</span>
    <div class="button">+
    </div>
  </div>
  <div id="remove-block">
    <span>Remove Block</span>
    <div class="button">-
    </div>
  </div>
</section>