Question

我想关闭forEach循环标记并继续执行代码，但是由于缺少转义标记，因此无法封装。

上面的图片说明了我的问题。

代码

const studentsAttendance = [
    {
        week: 1,
        attendance: [
            { day: 1, date: '12-11-2018', status: 'present' },
            { day: 2, date: '13-11-2018', status: 'absent' },
            { day: 3, date: '14-11-2018', status: 'present' },
            { day: 4, date: '15-11-2018', status: 'present' },
            { day: 5, date: '16-11-2018', status: 'present' },
        ]
    },
    {
        week: 2,
        attendance: [
            { day: 1, date: '19-11-2018', status: 'present' },
            { day: 2, date: '20-11-2018', status: 'present' },
            { day: 3, date: '21-11-2018', status: 'present' },
            { day: 4, date: '22-11-2018', status: 'vacation' },
            { day: 5, date: '23-11-2018', status: 'vacation' },
        ]
    },
    {
        week: 3,
        attendance: [
            { day: 1, date: '26-11-2018', status: 'present' },
            { day: 2, date: '27-11-2018', status: 'present' },
            { day: 3, date: '28-11-2018', status: 'present' },
            { day: 4, date: '29-11-2018', status: 'present' },
            { day: 5, date: '30-11-2018', status: 'present' },
        ]
    },
    {
        week: 4,
        attendance: [
            { day: 1, date: '03-12-2018', status: 'present' },
            { day: 2, date: '04-12-2018', status: 'present' },
            { day: 3, date: '05-12-2018', status: 'present' },
            { day: 4, date: '30-12-2018', status: 'present' },
        ]
    }
];

let allAttendance = '';

function renderAttendance() {
    studentsAttendance.forEach(result => {
        let attendanceResults = `<tr>
                                    <th scope='row'>${result.week}</th>
                                        ${result.attendance.forEach(attendance => {
                                            let currentDate = moment(attendance.date, 'D MM, YYYY');
                                                 return `<td  data-toggle='tooltip' data-placement='top' title='${convertDate(attendance.day == currentDate ? attendance.date : '')}' class=${selectColor(attendance.day === currentDate ? attendance.status : '')}><a style='cursor: default' class='text-light'><b>${selectLetter(attendance.day === currenDate ? attendance.status : '')}</b></a></td>`
                                        )

                                        </tr>`

        console.log(result)

        if (result === 'undefined') {
            return;
        }
        else {
            allAttendance += attendanceResults
            document.getElementById('attendance').innerHTML = allAttendance;
        }
    })
}

function selectColor(status) {
    if (!status) return '';
    if (status === 'present') return 'bg-success';
    if (status === 'absent') return 'bg-danger';
    if (status === 'vacation') return 'bg-warning'
}

function selectLetter(status) {
    if (status === '') return '';
    if (status === 'present') return 'P';
    if (status === 'absent') return 'A';
    if (status === 'vacation') return 'V'
}

function convertDate(date) {
    if (!date) {
        return '';
    }
    else {
        return moment(date, 'D MM, YYYY').format('D MMMM, YYYY');
    }
}

renderAttendance();

Answer 1

在</td>之后有一个多余的tic（`），从而关闭了字符串。这将) </tr>留在字符串外，并给您错误

转义javascript模板文字

1 个答案: