Question

我编写了四个函数来检查当前日期是否在特定日期（date1，date2，date3，date4）之前或之后。最初，我试图在一个函数中编写此函数，但是在第一个“ if”语句之后它会脱离该函数，因为它是正确的。在下面的编码示例中，它将显示ID为19700101-p的div，而不显示ID为20180501-p的div（因为据我所知，由于当前日期大于date1，因此“ if”语句为true，不需要在其后执行“ else if”语句。

对于更大的背景，我有一个包含注册按钮的19门课程页面。我的目标是编写一个脚本，该脚本将在日期过去后自动“禁用”注册按钮。此外，它将显示一些其他信息（例如，“该课程已通过，下一堂课将在xxx上进行”）。

有没有更简单的方法来编写此功能？

$(document).ready(function() {

  var current = new Date();
  var date1 = new Date("January 1, 1970")


  if (current.getTime() > date1.getTime()) {
    $('#19700101-f').hide();
    $('#19700101-p').show();
  }
  $('#currentDate').html(current);
  $('#date1').html(date1);
});

$(document).ready(function() {

  var current = new Date();
  var date2 = new Date("May 1, 2018")


  if (current.getTime() > date2.getTime()) {
    $('#20180501-f').hide();
    $('#20180501-p').show();
  }
  $('#date2').html(date2);
});

$(document).ready(function() {

  var current = new Date();
  var date3 = new Date("January 7, 2019")

  if (current.getTime() > date3.getTime()) {
    $('#20190107-f').hide();
    $('#20190107-p').show();
  }
  $('#date3').html(date3);
});

$(document).ready(function() {

  var current = new Date();
  var date4 = new Date("May 1, 2019")

  if (current.getTime() > date4.getTime()) {
    $('#20190501-f').hide();
    $('#20190501-p').show();
  }
  $('#date4').html(date4);
});

Answer 1

在此要解决的几件事：

1-您不需要多个$(document).ready( ... )事件。加载文档后需要发生的任何事情都可以放在一个$(document).ready( ... )中。

2-根据您的命名约定，您可以遍历每门课程，在-上拆分其ID，第一部分将类似于20160501。我们可以将其转换为实际的Date对象，将其与当前日期进行比较，并动态确定它是否过去。

这意味着您不需要进行任何硬编码，只要您继续添加具有相同ID命名约定的课程，这将继续起作用。

//".course" selects all elements with class" course"
//.filter() reduces that selection to only those in the past

let $pastCourses = $(".course").filter(function() { 
  let dateString = $(this).attr("id").split("-")[0], //"20140502"
      year = dateString.substr(0,4),                 //"2014"
      month = dateString.substr(4,2),                //"05"
      day = dateString.substr(6,2),                  //"02"
      date = new Date(year,month,day);               //Convert to Date

  return date < new Date();                          //Select only those in the past
});

$pastCourses
  .addClass("inactive")
  .append(" - This course has passed.");

.inactive { color: #ccc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="20140502-f" class="course"> 2014-05-02 </div>
<div id="20150122-f" class="course"> 2015-01-11 </div>
<div id="20201224-f" class="course"> 2020-12-24 </div>

我意识到在您的原始帖子中，您正在隐藏初始课程并显示替换元素，但是我建议您在代码中这样做，而不是每个元素都包含两个。

遍历jQuery函数中的每个“ If语句”

1 个答案: