Question

我有一个具有两种模式的按钮。第一个排序顺序是降序。第二排序升序。我希望我们的盒子以这种方式分类。

我们将数据放入customSort中。在这里，我们定义了一个名为timeToNum的变量。它的任务是获取时钟并将其转换为时间戳。此步骤之后（时间+时间戳）。用于排序的时钟盒（时间）。尚未更改timeToNum。只有我们为其设置了名称。您必须创建此变量。如果您不知道这种方法。您可以自己对这些框进行排序。

let FlyList = [{
    "time": "15:20",
  },
  {
    "time": "15:10",
  },
  {
    "time": "18:40",
  },
  {
    "time": "23:40",
  }
];

// Sort Array
function customSort(array, field, Desc, type) {

  if (!type && field.toLowerCase().indexOf('time') !== -1) type = 'time';

  switch (type) {
    case 'time':
      Desc ? list.sort((a, b) => this.timeToNum(a[field]) - this.timeToNum(b[field])) : list.sort((a, b) => this.timeToNum(b[field]) - this.timeToNum(a[field]));
      break;
    default:
      var type = Desc ? true : false;
      array.sort(function(a, b) {
        if (type) return a[field] - b[field];
        else return b[field] - a[field];
      });
      break;
  }
};

body {
  margin: 0 auto;
  padding: 0 auto;
  background: skyblue;
}

.full-item {
  width: 800px;
  height: 600px;
  margin: 50px auto;
  background: grey;
}

.full-item .button-item {
  width: 100%;
  height: 80px;
  background: #B33771;
}

.full-item .button-item button {
  /*margin: 30px 45%;*/
}

.full-item .item-sort {
  width: 100%;
  height: 500px;
  background: white;
  margin-top: 10px;
}

.full-item .item-sort:first-child {
  margin-top: 10px;
}

.full-item .item-sort .item {
  width: 90%;
  height: 80px;
  background: red;
  margin: 10px auto;
}

.item-sort .item .pic {
  width: 30%;
  height: 100%;
  background: #3B3B98;
  float: left;
}

.item-sort .item .time {
  width: 70%;
  height: 100%;
  background: #1B9CFC;
  float: right;
}

.item-sort .item .time span {
  color: white;
  text-align: center;
  display: block;
  line-height: 100px;
}

<div class="full-item">
  <div class="button-item">
    <p>Sort By </p>
    <button id="sort-asc-desc">Asc/Desc</button>
  </div>
  <div class="item-sort">

    <div class="item">
      <div class="pic" style="background: green">image</div>
      <div class="time" style="background: green"><span>{{time}}</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: red">image</div>
      <div class="time" style="background: red"><span>{{time}}</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: grey">image</div>
      <div class="time" style="background: grey"><span>{{time}}</span></div>
    </div>

    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>{{time}}</span></div>
    </div>

  </div>
</div>

我使用了javascript方法6。您可以使用jQuery或Javascript6。对这些框进行排序。

方法asc和desc的排序项

0 个答案: