循环遍历 jQuery 函数中的每个“If 语句”答案

【问题标题】：Looping through each "If statement" in a jQuery function循环遍历 jQuery 函数中的每个“If 语句”
【发布时间】：2019-01-07 15:37:01
【问题描述】：

我编写了四个函数来检查当前日期是在特定日期之前还是之后（date1、date2、date3、date4）。最初，我试图在一个函数中编写它，但它会在第一个“if”语句之后脱离函数，因为它是真的。在我下面的编码示例中，它将显示 ID 为 19700101-p 的 div，但不显示 ID 为 20180501-p 的 div（因为据我了解，由于当前日期大于 date1，因此“if”语句为真并且存在不需要在它之后执行“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);
});

【问题讨论】：

标签： jquery function if-statement

【解决方案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>

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

【讨论】：