javascript - 数组按照1-9和a-z显示顺序

Question

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

1. 用户可以添加和删除 block ， block 会自动命名带有数字字母组合，请参见所附图片。
2. 我已经在数组 Array(3) [ "4p", "5i",“6g”][ ] 1

问题:

1. 我想以正确的顺序显示 block ，即 1-9 和 a-z，每次用户单击“添加 block ”时。正如您在图片中看到的那样，目前 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