jQuery切换背景,每次点击

时间:2018-12-14 13:23:10

标签: javascript jquery

我想在每次点击时切换背景。但是我不知道为什么仍然保留以前的颜色。因此,当我单击每一行时,应重设以前的表格背景(或白色)。

我已经用'timelineColor'设置了可变颜色代码

enter image description here

我的代码就是这样。

// Single Click Select Event to Timeline
$(document).ready(function () {
    $('#subjectList tr').click(function () {

        // 현재 클릭된 Row(<tr>)
        let tr = $(this);
        let td = tr.children();
        let day = td.eq(4).text().substring(0, 3);
        let day1 = td.eq(4).text().substring(4, 7);
        let time = Number(td.eq(5).text().substring(0, 1));
        let time1 = Number(td.eq(5).text().substring(2, 3));
        console.log(day);
        console.log(day1);
        console.log(time);
        console.log(time1);
        let dayArray = [day, day1];
        let timeArray = [time, time1];

        let timelineColor = getRamdomColor();
        for (i = 0; i < dayArray.length; i++) {
            let day;
            switch (dayArray[i]) {
                case 'monday':
                    day = 'mon';
                    break;
                case 'tuesday':
                    day = 'tue';
                    break;
                case 'wednesday':
                    day = 'wed';
                    break;
                case 'thursday':
                    day = 'tur';
                    break;
                case 'friday':
                    day = 'fri';
                    break;
            }
            let clickDay = day + timeArray[i];
            let clickDay1 = day + (Number(timeArray[i]) + 1);
            $(`#${clickDay}`).css('background-color', timelineColor);
            $(`#${clickDay1}`).css('background-color', timelineColor);
        }
    })
})

2 个答案:

答案 0 :(得分:1)

您必须像这样先重置背景

(点击功能的第一行)

$('myTable td').css('background','transparent');

用表的名称ofc(或类或ID)替换myTable

答案 1 :(得分:1)

因此,当您单击一行时,应将整行重置为白色,然后该项目将变为随机颜色?

类似的东西应该将行重置为白色

tr.children().css('background-color', '#fff');

在您之前

$(`#${clickDay}`).css('background-color', timelineColor);