btn-эффект опасности не применяется, используя jQuery - PullRequest
Новая
       4

btn-эффект опасности не применяется, используя jQuery

0 голосов
/ 02 марта 2020

Я работаю над слайдером, который получает свои значения из базы данных, и сценарий таков: если «срок выполнения» задачи находится в состоянии ожидания, он показывает btn-success со статусом ожидания. Если мы завершаем sh задачу, то она показывает btn-warning со статусом выполнено. Если «срок выполнения» пройден, он все равно отображается как btn-success с ожидающим статусом. То, что я хочу сделать, это сделать так, что если «срок выполнения» пройден, то он показывает btn-danger с датой состояния пройдено.

снимок экрана https://ibb.co/HtMYnpZ и полный код здесь

paste.ofcode.org / y6DWM6awBRjXvuYstv8uNH

код: 

   if(response.task.status === 'completed') {
            $('.completed-task-table').stop().slideToggle();
            // $('#finishTaskForm').find('select[name=assignTo]').css('display', 'none');
            // $('#finishTaskForm').find('input[name=dueDate]').css('display', 'none');
            // $('#finishTaskForm').find('button').css('display', 'none');
            // utils.findAndAddFormAttribute(formAttrForDisabled);
        } else {
            $('.pending-task-table').stop().slideToggle();
            // $('#finishTaskForm').find('select[name=assignTo]').css('display', 'unset');
            // $('finishTaskForm').find('input[name=dueDate]').css('display', 'unset');
            // $('finishTaskForm').find('button').css('display', 'unset');
            utils.findAndRemoveFormAttribute(formAttributeForEnabled);
        }

function setTasksCarausel() {
  html = '<div class="carousel-inner no-padding">';
  let tasksCopy = utils.setSliders(Array.from(tasks));
  tasksCopy.map((tasks, index) => {
    html += `<div class="item ${index === 0 ? 'active' : ''}">`;
    tasks.map(t => {
        html += `
            <div class="col-md-3 col-sm-6 col-xs-12 pending-task-btn" onclick="handleClickTaskItem('${t._id}')">
                <span href="" class="btn ${t.status === 'completed' ? 'btn-warning' : 'btn-success'} btn-lg dashboard-icon" style="width: 200px; height: 150px;">
                    <p style="padding-top: 10px; font-size: 20px; font-weight: bold;">${t.type}</p>
                    <p style="padding-top: 12px; font-size: 20px; font-weight: bold;">${utils.convertDate(t.dueDate)}</p>
                    <p style="padding-top: 10px; font-size: 20px; font-weight: bold;">( ${t.status } )</p>
                </span>
            </div>
        `;
    });
    html += `</div>`;
})

1 Ответ

0 голосов
/ 02 марта 2020

Хотя я чувствую, что у меня недостаточно информации, чтобы полностью ответить на ваш вопрос, в частности, в каком формате находится t.dueDate, я думаю, что что-то в этом роде должно работать.

Вы должны быть в состоянии просто вложить другой встроенный оператор if в этой строке. 

"btn ${t.status === 'completed' ? 'btn-warning' : 'btn-success'} btn-lg dashboard-icon"

В этом новом операторе if вы должны сравнивать текущую дату с вашим t.dueDate. 

"btn ${t.status === 'completed' ? 'btn-warning' : (new Date(t.dueDate) < new Date() ? 'btn-danger' : 'btn-success')} btn-lg dashboard-icon"

ПРИМЕЧАНИЕ. Это зависит хоть какой формат t.dueDate. Объект Date в javascript ожидает определенные форматы, но на самом деле вполне гибок. Некоторые примеры исключенных форматов можно найти на https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Examples

...