jquery - 我可以从 jquery 单击事件循环事件调用吗？

Question

我正在尝试使用 jquery 将行突出显示添加到表格行。我想要 3 种预定义的颜色，这些颜色使用一次单击事件进行循环。例如，如果用户第一次单击以黄色突出显示的行，再次单击会将其变为橙色，第三次单击将其变为红色。

我目前只能使用一种颜色(开/关)来做到这一点

当前代码:

var row_highlight_color = localStorage.getItem('row_highlight_color');  

if (!row_highlight_color) {
    row_highlight_color = '#f89406';
}

// lets get our custom color definition and append it to the style sheet

$('<style>.row_highlight_css { background-color: '+row_highlight_color+' !important; color: #ffffff;}</style>').appendTo('head');

$('table.table-striped tbody tr').on('click', function () {
    $(this).find('td').toggleClass('row_highlight_css');
});

关于如何实现这一点有什么想法吗？

Answer 1

我建议使用 data 元素来存储当前状态:

$('table.table-striped tbody tr').on('click', function () {

    var $this = $(this);
    var col = $this.data('state');         // get current state

    if (col === undefined) {
        col = 0;                           // pick the colour to use on first click
    } else {
        $this.removeClass('row_highlight_' + col);  // remove previous class
        col = (col + 1) % 3;                        // update state
    }

    $this.addClass('row_highlight_' + col) // add new class
         .data('state', col);              // update state
});

注意:这将独立维护每一行的状态。