我的约会类型出了什么问题

Whats wrong with my date sort?

本文关键字:什么 问题 约会 类型 我的      更新时间:2023-09-26

我试图修改排序函数,使其正确排序日期,但脚本什么也没做。

我的HTML

<div class="sort_date">Sort Date</div>
  <div class="list">
    <div class="dateDiv">04/05/2012, 10:25</div>
    <div class="dateDiv">11/05/2012, 19:41</div>
    <div class="dateDiv">09/05/2012, 07:00</div>
    <div class="dateDiv">09/05/2012, 16:45</div>
  </div>
</div>

我的Javascript代码:

function parseDate(input) {
  var parts = input.match(/('d+)/g);
  return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4]);
}
var NewDate = $.makeArray($(".dateDiv"));
NewDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) < parseDate( $(b).text() );
});
var OldDate = $.makeArray($(".dateDiv"));
OldDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) > parseDate( $(b).text() );
});
$(function(){
    var sortHighCheck = null;
    $('.sort_date').click(function(){
        if (sortHighCheck === 1) {
            $(".dateDiv").sort(NewDate).appendTo('.list')
            sortHighCheck = 0;
        } else {
            $(".dateDiv").sort(OldDate).appendTo('.list')
            sortHighCheck = 1;
        }
});
});

这是一把js小提琴。

我的错误在哪里?有人能帮忙吗?

您的脚本定义了两个div数组,每个方向一个。因此,在单击事件之后,似乎只需要将.list的HTML替换为适当排序的内容。

function parseDate(input) {
  var parts = input.match(/('d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}
$(function() {
  var NewDate = $.makeArray($(".dateDiv"));
  NewDate.sort(function(a, b) {
    return parseDate($(a).text()) < parseDate($(b).text());
  });
  var OldDate = $.makeArray($(".dateDiv"));
  OldDate.sort(function(a, b) {
    return parseDate($(a).text()) > parseDate($(b).text());
  });
  var sortHighCheck = null;
  $('.sort_date').click(function() {
    if (sortHighCheck == 1) {
      $('.list').html(NewDate);
      sortHighCheck = 0;
    } else {
      $('.list').html(OldDate);
      sortHighCheck = 1;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">2012/04/05, 10:25</div>
  <div class="dateDiv">2012/11/05, 19:41</div>
  <div class="dateDiv">2012/09/05, 07:00</div>
  <div class="dateDiv">2012/09/05, 16:45</div>
</div>

另外,请注意,我已经将年份移到了每个字符串的开头。为了创建准确的日期对象,解析函数需要特定格式的日期字符串,年份列在第一位:

新日期(年、月[、日[、小时[、分[、秒[、毫秒]]]]]);

查看日期@MDN

例如:

2012年5月4日=>1909年11月2日星期二
2012/04/05=>2012年4月5日星期四

<小时>

编辑

的确,即使月份排在第一位,列表似乎也能正确排序。但这只是一种幻觉。parse函数将月份值视为年,这将按看起来正确的顺序排列字符串。但当日期的年份不同时,你可以看到它们实际上并没有按时间排序。月份是有序的,但年份不是。

function parseDate(input) {
  var parts = input.match(/('d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}
$(function() {
  var dates = $.makeArray($(".dateDiv")),
      sortHighCheck = null;
  
  $('.sort_date').click(function() {
    
    if (sortHighCheck == 1) {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) < parseDate($(b).text());
      });
      sortHighCheck = 0;
    } else {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) > parseDate($(b).text());
      });
      sortHighCheck = 1;
    }
    
    $('.list').html(dates);
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">04/05/2012, 10:25</div>
  <div class="dateDiv">11/05/2013, 19:41</div>
  <div class="dateDiv">09/05/2014, 07:00</div>
  <div class="dateDiv">09/05/2015, 16:45</div>
</div>