CODEWITHSUNDEEP
jqueryfunctionif-statement
Steven Erickson
Steven Erickson

Reputation: 29

Looping through each "If statement" in a jQuery function

I wrote four functions to check to see if the current date is before or after a specific date (date1, date2, date3, date4). Originally, I tried to write this in one function but it would break out of the function after the first "if" statement because it was true. In my coding example below, it would show the div with ID 19700101-p but not the div with ID 20180501-p (because as I understand it, since the current date was greater than date1, the "if" statement was true and there was no need to execute the "else if" statements after it.

For greater context, I have a page of 19 courses with registration buttons. My goal is to write a script that will automatically "disable" the registration button when the date has passed. Additionally it will show some additional information (i.e., "This class has passed, the next class will take place on xxx").

Is there a simpler way to write this function?

$(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);
});

Upvotes: 0

Views: 35

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

A couple things to address here:

1 - You never need multiple $(document).ready( ... ) events. Anything that needs to occur after the document has loaded can be put in one single $(document).ready( ... ).

2 - Given your naming convention, you could loop through each of the courses, split their ID on the -, and the first piece would be something like 20160501. We can turn this into an actual Date object, compare it to the current date, and determine if it's in the past dynamically.

This would mean you don't need to hard code anything, and that as long as you continue to add your courses with the same ID naming convention, this will continue to work.

//".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>

I realize that in your original post, you're hiding the initial course and showing a replacement element, however I might suggest doing that in code instead of having two of each and every element.

Upvotes: 1

Related Questions