[btn-danger效果不适用于jQuery

Question

我正在使用一个从数据库获取其值的滑块，并且该方案是，如果任务的“到期日”处于挂起状态，则显示btn-success，状态为挂起。如果我们完成任务，那么它将显示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>`;
})

Answer 1

虽然我觉得我没有足够的信息来完全回答您的问题，特别是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的格式。 javascript中的Date对象需要某些格式，但实际上非常灵活。您可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Examples

中找到一些例外格式的示例