Как создать автоматический цикл для этого кода JavaScript?

Question

Я создал код для отключения / включения кнопки на странице:

btna = [
{
  "id":"#btn123",
  "formId" : "#wpcf7-f4849-p4850-o1",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 23, 2019 14:00:00",
},
{
  "id":"#btn1234",
  "formId" : "#wpcf7-f4940-p4850-o2",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 25, 2019 14:00:00",
},
{
  "id":"#btn12345",
  "formId" : "#wpcf7-f4941-p4850-o3",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 28, 2019 14:00:00",
}
]
$(document).ready(function(){
  let openTime
  let closeTime
  let button
  let itemForm
  let now = Date.now();
  btna.map(function(item){
    openTime = (new Date(item.openTime)).getTime()
    closeTime = (new Date(item.closeTime)).getTime()
    button = $( item.id )
    itemForm = $( item.formId )
    if (closeTime > now && openTime < now ) {
      // Button in correct time period
      button.addClass("active")
      // if you don't want to auto hide form in page startup just comment out this line 
      itemForm.hide()
      button.click(function(){
        $( item.formId ).toggle(250)
      })
    }else{
      // Button is'nt in its time period
      button.addClass("ex1")
      itemForm.hide()
    }
  })
})

Моя проблема - это раздел массива, где мне нужно добавить несколько дат.Мне интересно, есть ли способ установить openTime и closeTime, а затем он автоматически добавляет 7 дней (1 неделю) к каждому из них.

Это то, что я пытался:

let openTime= new Date("June 23, 2019 14:00:00");
let closeTime= new Date("June 26, 2019 14:00:00");
btna = [
    {
        "id":"#btn123",
        "formId" : "#wpcf7-f4849-p4850-o1",
        'openTime' : openTime,
        'closeTime' : closeTime,
    },
    {
        "id":"#btn1234",
        "formId" : "#wpcf7-f4940-p4850-o2",
        'openTime' : openTime.setDate(openTime.getDate() + 7),
        'closeTime' : closeTime.setDate(openTime.getDate() + 7),
    },
    {
        "id":"#btn12345",
        "formId" : "#wpcf7-f4941-p4850-o3",
        'openTime' : openTime.setDate(openTime.getDate() + 7),
        'closeTime' : closTime.setDate(openTime.getDate() + 7),
    }
]

$(document).ready(function(){
    let button
    let itemForm
    let now = Date.now();
    btna.map(function(item){
        openTime = (new Date(item.openTime)).getTime()
        closeTime = (new Date(item.closeTime)).getTime()
        button = $( item.id )
        itemForm = $( item.formId )
        if (openTime < now && closeTime > now) {
            // Button in correct time period
            button.addClass("active")
            // if you don't want to auto hide form in page startup just comment out this line 
            itemForm.hide()
            button.click(function(){
                 $( item.formId ).toggle(250)
            })
        }else{
            // Button is'nt in its time period
            button.addClass("hide")
            itemForm.hide()
        }
    })
})

Однако, это не совсем то, что я ищу.Я уверен, что есть другой более короткий способ вставить openTime и closeTime в цикл, что-то вроде этого: пусть openTime + = 7 let closeTime + = 7 Но я не знаю, как отобразить эти переменные внутри массива btna!Заранее спасибо

Answer 1

Далее добавлена ​​функция addDays, которая берет две даты, количество дней, которые вы хотите добавить, и исходный массив объектов.

Внутренне функция возвращает новый массив, который для первой части является просто вашим первым исходным объектом, но с новым временем начала и закрытия (без добавления дней). Вторая часть массива представляет собой результат аналогичной процедуры: мы берем все объекты, кроме первого, перебираем их, воссоздаем их через Object.assign, где мы берем исходный объект и просто «перезаписываем» новую дату значение.

let btna = 
[ 
  { "id":"#btn123", "formId" : "#wpcf7-f4849-p4850-o1", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 23, 2019 14:00:00", }, 
  { "id":"#btn1234", "formId" : "#wpcf7-f4940-p4850-o2", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 25, 2019 14:00:00", },
  { "id":"#btn12345", "formId" : "#wpcf7-f4941-p4850-o3", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 28, 2019 14:00:00", }
]; 

let addDays = (start, close, days, arr) => {
  return [Object.assign(arr[0], {openTime: start, closeTime: close}),
    ...arr.slice(1).map(v => Object.assign(v, {openTime: new Date(start.getTime() + (days * 86400000) + (7200000)), closeTime: new Date(close.getTime() + (days * 86400000) + (7200000))}))
  ];
};

let startDate = new Date("June 23, 2019 14:00:00");
    closeDate = new Date("June 26, 2019 14:00:00");

let res = addDays(startDate, closeDate, 7, btna); 

console.log(res)

Если вы хотите, чтобы вместо 12:00:00 было 14:00:00, просто добавьте + (7200000) к каждой дате и установите значения первых объектов, как и остальные.

Answer 2

Я бы посоветовал вам использовать встроенные функции даты для правильной обработки объектов даты:

const btna = [
{
  "id":"#btn123",
  "formId" : "#wpcf7-f4849-p4850-o1",
  'openTime' : "June 24, 2019 14:00:00",
  'closeTime' : "June 23, 2019 14:00:00",
},
{
  "id":"#btn1234",
  "formId" : "#wpcf7-f4940-p4850-o2",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 25, 2019 14:00:00",
},
{
  "id":"#btn12345",
  "formId" : "#wpcf7-f4941-p4850-o3",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 28, 2019 14:00:00",
}
];


const arr = btna.map(el => {
	el.openTime = addDays(7, el.openTime);
	el.closeTime = addDays(7, el.closeTime);
	
	return el;
});

function addDays(days, dateString) {
	let date = new Date(dateString);
	date.setDate(date.getDate() + days);
	return date;
}

console.log(arr);