Question

我建造了一个动态的金字塔;见附图。

用户可以在金字塔中添加和删除块
每次用户添加一个块时，都会有一个随机数字和字母应用于新块以命名它，例如8p，4e

问题：

我想用.push()

let values = [''];
values.push(number + resultLetter);
console.log(values);

每次添加块时，都应自动对块的顺序进行排序。我当时想用.sort()。
每次移除一个块时，都应该从数组中删除该块的值，可能使用.pop()

但是，我写的代码似乎每次都会覆盖推送到数组的值，而我似乎无法弄清楚如何防止这种情况（可能是一个单击的函数，可以将它们与.val（）等组合起来。）。

$(document).ready(function() {
  //Add Block Functionality
  $('#add-block .button').click(function() {
    //determin widht of last div
    var lastwidth = $('.pyramid li:last-child .item').width();

    //calculation of next div
    if (lastwidth == null) {
      var plus = 90;
    } else {
      var plus = lastwidth + 190; //not sure why 190 but with this value they line up smoothly. Was expecting 0 and 100 for the values.
    }

    //create radom number
    var number = Math.floor(Math.random() * 9) + 1;

    //create radom letter
    function randLetter() {
      var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var letter = letters[Math.floor(Math.random() * letters.length)];

      return letter
    }

    //make letter available globally
    var resultLetter = randLetter();

    //create radom color
    function randColor() {
      var colors = ["green", "yellowgreen", "Chocolate", "goldenrod", "cadetblue", "firebrick", "magenta", "LightSeaGreen", "Peru", "Sienna", "SlateBlue", "Snow", "Tan", "Skyblue"];
      var color = colors[Math.floor(Math.random() * colors.length)];

      return color
    }

    //make color available gloabally
    var resultColor = randColor();
    var $block = $('<li><div class="item" style="width:' + plus + 'px; border-bottom: 60px solid ' + resultColor + ' ;"><input id="values" type="text" placeholder=" ' + number + resultLetter + ' " maxlength="2"> </div></li>');

    $('.pyramid').append($block);

    //save values
    let values = [''];

    values.push(number + resultLetter);
    console.log(values);
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
    $('.pyramid li').last().remove();
  })
});

body,
html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  background-color: #101935;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li div.item {
  margin: 0 auto;
  position: relative;
  height: 0px;
  width: 100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #0488e0;
  display: flex;
  justify-content: center;
}

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;
}

#values {
  background: rgba(255, 255, 255, .6);
  border: none;
  text-align: center;
  font-size: 15px;
  color: black;
  font-weight: bold;
  height: 20px;
  width: 35px;
  border-radius: 2px;
  position: absolute;
  top: 30px;
}

#values:focus {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
  outline: none;
}


/*buttons section */

.buttons,
#add-block,
#remove-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#add-block span,
#remove-block span {
  background-color: #edf7f6;
  padding: 5px 15px;
  font-size: 18px;
  border-radius: 2px;
  color: #888;
  font-weight: 400;
}

#add-block .button,
#remove-block .button {
  background-color: #0488e0;
  padding: 5px;
  border-radius: 2px;
  width: 40px;
  text-align: center;
  display: block;
  font-size: 20px;
  color: #ffffff;
  margin: 10px;
  transition: background-color 250ms ease-in-out 100ms;
}

#add-block .button:hover,
#remove-block .button:hover {
  background-color: #059BFF;
  cursor: pointer;
}

<body>

  <ul class="pyramid">
  </ul>

  <section class="buttons">
    <div id="add-block">
      <span>Add Block</span>
      <div id="newValue" class="button">+
      </div>
    </div>
    <div id="remove-block">
      <span>Remove Block</span>
      <div class="button">-
      </div>
    </div>
  </section>


  <script src="https://code.jquery.com/jquery-      3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="resources/js/main.js"></script>

</body>

Answer 1

只需将数组声明移到点击功能上方，这样每次点击+按钮时都不会覆盖数组，并且你不需要空元素来声明数组，如下所示：

$(document).ready(function() {
  //Add Block Functionality
  let values = [];

  $('#add-block .button').click(function() {
    //determin widht of last div
    var lastwidth = $('.pyramid li:last-child .item').width();

    //calculation of next div
    if (lastwidth == null) {
      var plus = 90;
    } else {
      var plus = lastwidth + 190; //not sure why 190 but with this value they line up smoothly. Was expecting 0 and 100 for the values.
    }

    //create radom number
    var number = Math.floor(Math.random() * 9) + 1;

    //create radom letter
    function randLetter() {
      var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var letter = letters[Math.floor(Math.random() * letters.length)];

      return letter
    }

    //make letter available globally
    var resultLetter = randLetter();

    //create radom color
    function randColor() {
      var colors = ["green", "yellowgreen", "Chocolate", "goldenrod", "cadetblue", "firebrick", "magenta", "LightSeaGreen", "Peru", "Sienna", "SlateBlue", "Snow", "Tan", "Skyblue"];
      var color = colors[Math.floor(Math.random() * colors.length)];

      return color
    }

    //make color available gloabally
    var resultColor = randColor();
    var $block = $('<li><div class="item" style="width:' + plus + 'px; border-bottom: 60px solid ' + resultColor + ' ;"><input class="values" type="text" placeholder=" ' + number + resultLetter + ' " maxlength="2"> </div></li>');

    $('.pyramid').append($block);

    //save values

    values.push(number + resultLetter);
    values.sort();
    console.log(values);
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
    value = $(".values", $('.pyramid li').last()).attr("placeholder").trim()
    values.splice(values.indexOf(value), 1)
    console.log(values)
    $('.pyramid li').last().remove();
  })
});

也许我没有理解你的问题吗？

在数组

1 个答案: