Question

我创建了一个动态金字塔。

用户可以添加和删除块，并自动命名块使用数字组合，请参见附图。
我已将该组合保存并排序为数组Array（3）[“4p”，“5i”， “6g”] [] 1

问题：

每次用户点击“添加阻止”时，我想以正确的顺序显示块，即1-9和a-z。正如你在图片中看到的那样，目前6g出现在4p之前。

有没有办法实现这个目标？

我一直试图用以下

 function newOrder() {
    var oldOrder = values;
    values.sort();
    document.getElementByClassName('.values').innerHTML = values;
  }

$(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()//find last value added in pyramid//.attr()value of attribute placeholder,trim() is just for white space
    values.splice(values.indexOf(value), 1)//indexOf() method returns the position of the first occurrence of a specified value in a string. In this case it is the index of value, which is the last item in the array. Could be replaced by -1 I think
    console.log(values)
    $('.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 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

您需要解决的核心问题是将排序数组放在哪里 1个数字应该是从高到低的顺序 2 - 如果两个数字相同，则应考虑它们的字母表，即从高到低

您可以使用Array的内置排序功能并提供自定义比较器来实现此目的

注意：除了连接数字和字母之外，您还可以创建一个具有两个属性的对象，这些属性可以帮助您编写简化的比较器，同时您可以在html中呈现时始终连接两个属性

var myStrings=[{num:'1',char:'z'},{num:'9',char:'a'},{num:'1',char:'b'},{num:'9',char:'d'}]

function myCustomComparator(a,b){
if (a.num<b.num) {
    return -1;
  }
  else if (a.num>b.num) {
    return 1;
  }
  // a.num must be equal to b.num
  if (a.char<b.char) {
    return -1;
  }
  else if (a.char>b.char) {
    return 1;
  }
  //char must be equal too
  return 0;
}
myString.sort(myCustomComparator);

^上面的代码没有经过测试但你现在有一个想法如何使用自定义比较器来实现你想要的东西，你可以进一步阅读它here

根据1-9和a-z

1 个答案: