Цикл каждого «оператора If» в функции jQuery - PullRequest
Новая
       36

Цикл каждого «оператора If» в функции jQuery

0 голосов
/ 07 января 2019

Я написал четыре функции, чтобы проверить, является ли текущая дата до или после определенной даты (дата1, дата2, дата3, дата4). Первоначально я пытался написать это в одной функции, но она вырвалась бы из функции после первого оператора «if», потому что это было правдой. В моем примере кодирования ниже будет показан div с идентификатором 19700101-p, но не div с идентификатором 20180501-p (потому что, насколько я понимаю, поскольку текущая дата была больше, чем date1, выражение «if» было истинным и существует не было необходимости выполнять операторы «else if» после него.

Для большего контекста у меня есть страница из 19 курсов с кнопками регистрации. Моя цель - написать скрипт, который автоматически «отключит» кнопку регистрации, когда дата истечет. Кроме того, он покажет некоторую дополнительную информацию (например, «Этот класс пройден, следующий класс будет проходить в ххх»).

Есть ли более простой способ написать эту функцию? 

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

1 Ответ

0 голосов
/ 07 января 2019

Пара вещей для решения здесь:

1 - Вам никогда не понадобится несколько $(document).ready( ... ) событий. Все, что должно произойти после загрузки документа, может быть помещено в один $(document).ready( ... ).

2 - Принимая во внимание ваше соглашение об именах, вы можете циклически проходить по каждому из курсов, делить их идентификатор на -, и первая часть будет выглядеть как 20160501. Мы можем превратить его в фактический Date объект, сравнить его с текущей датой и определить, был ли он в прошлом динамически.

Это будет означать, что вам не нужно ничего кодировать жестко, и если вы продолжите добавлять свои курсы с тем же соглашением об именовании идентификаторов, это продолжит работать. 

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

Я понимаю, что в исходном сообщении вы скрываете начальный курс и показывает заменяющий элемент, однако я мог бы предложить сделать это в коде вместо того, чтобы иметь два элемента каждый и каждый.

...