Question

我正在创建待办事项列表作为第一个项目。用户输入活动时，会将其与开始/结束时间一起添加到列表中。我希望我的代码使用开始时间以正确的顺序对项目进行排序，但是我不知道如何去做！我在徘徊，如果你能帮忙

这是将项目添加到列表的Javascript：

addListItem: function(obj, type) {
            var html, newHtml;

            if (type === 'health') {

                html = '<div class="item row" style="color: blue" id="health-%id%"><p class="item_description">%activity%</p><p class="item_start">%start%</p><p class="until">until</p><p class="item_end">%end%</p><button class="delete_btn" style="color: blue"><i class="ion-ios-close-outline"></i></button></div>';


            } else if (type === 'work') {

                html = '<div class="item row"  style="color: red" id="work-%id%"><p class="item_description">%activity%</p><p class="item_start">%start%</p><p class="until">until</p><p class="item_end">%end%</p><button class="delete_btn" style="color: red"><i class="ion-ios-close-outline"></i></button></div>';

            } else if (type === 'leisure') {

                html = '<div class="item row"  style="color: yellow" id="leisure-%id%"><p class="item_description">%activity%</p><p class="item_start">%start%</p><p class="until">until</p><p class="item_end">%end%</p><button class="delete_btn" style="color: yellow"><i class="ion-ios-close-outline"></i></button></div>';

            }


                newHtml = html.replace('%activity%', obj.activity);
                newHtml = newHtml.replace('%id%', obj.id);
                newHtml = newHtml.replace('%start%', obj.startTime);
                newHtml = newHtml.replace('%end%', obj.endTime);


            document.querySelector(DOMstrings.list).insertAdjacentHTML('beforeend', newHtml);

我考虑过可能将所有开始时间都添加到数组中，然后使用sort（）数组方法，但后来我真的不知道从哪里开始。

Answer 1

鉴于您发布的少量信息，我不得不假设一些事情。

下面的代码将帮助您继续执行任务

const DOMstrings = {
  "list": "#container"
};
const list = {
  "health": [{
      "activity": "Health Act1",
      "id": "id1",
      "startTime": "2019-09-10T14:48:00",
      "endTime": "2019-09-10T15:48:00"
    },
    {
      "activity": "Health Act2",
      "id": "id2",
      "startTime": "2019-09-10T12:48:00",
      "endTime": "2019-09-10T13:48:00"
    },
    {
      "activity": "Health Act3",
      "id": "id3",
      "startTime": "2019-09-10T16:48:00",
      "endTime": "2019-09-10T17:48:00"
    }
  ],
  "work": [{
      "activity": "Work Act1",
      "id": "id1",
      "startTime": "2019-09-10T14:48:00",
      "endTime": "2019-09-10T15:48:00"
    },
    {
      "activity": "Work Act2",
      "id": "id2",
      "startTime": "2019-09-10T11:48:00",
      "endTime": "2019-09-10T12:48:00"
    },
    {
      "activity": "Work Act3",
      "id": "id3",
      "startTime": "2019-09-10T16:48:00",
      "endTime": "2019-09-10T17:48:00"
    }
  ]
}
const whatever = {
  "addListItem": function(obj, type) {
    var html = '<div class="item row ' + type + '" id="' + type + '-%id%"><p class="item_description">%activity%</p><p class="item_start">%start%</p><p class="until">until</p><p class="item_end">%end%</p><button class="delete_btn" style="color: blue"><i class="ion-ios-close-outline"></i></button></div>'
      .replace('%activity%', obj.activity)
      .replace('%id%', obj.id)
      .replace('%start%', obj.startTime)
      .replace('%end%', obj.endTime)
    document.querySelector(DOMstrings.list).insertAdjacentHTML('beforeend', html)
  }
}
Object.keys(list).forEach(type => {
  list[type].sort((a,b) => new Date(a.startTime)-new Date(b.startTime));
  list[type].forEach(activity => whatever.addListItem(activity,type)) 
})

.health .item_description {
  color: blue
}

.work .item_description {
  color: red
}

.leasure .item_description {
  color: yellow
}

<div id="container"></div>

对列表中的项目进行排序

1 个答案: