0

我正在尝试使用 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');
});

关于我如何做到这一点的任何想法？

4

3 回答 3

4

我建议使用一个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
});

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

于 2013-05-30T13:43:15.230 回答
0

为此，您不应使用工具类，而应使用 addClass()、removeClass()。您可以使用 hasClass() 检查课程

var myElement = $('yourElement');
if(myElement.hasClass('first_class')) {
     myElement.removeClass('first_class').addClass('second_class');
} else if(myElement.hasClass('second_class')) {
     myElement.removeClass('second_class').addClass('third_class');
} else {
     myElement.addClass('first_class');
};

您还可以使用数据类并执行以下操作：

var myElement = $('myElement');
var data = myElement.data('class');
switch(data) {
   case 'first':
      myElement.removeClass('first_class').addClass('second_class').data('class', 'second');
      break;
   case 'second':
      myElement.removeClass('second_class').addClass('third_class').data('class', 'thrid');
      break;
   default:
      myElement.addClass('first_class').data('class', 'first');
}

您应该添加第三次单击后的行为，像这样，它将回到第一类。hasClass的文档 希望它有帮助

于 2013-05-30T13:49:54.747 回答
0

可能是这些方面的东西？

var myColors = ['#f89406','#6f9406','#f84006'];   // whatever colors you want
var colorIndex = 0;

$('table.table-striped tbody tr').on('click', function () {
    $(this).find('td').css("background-color",myColors[colorIndex]);
    colorIndex = (colorIndex + 1) % myColors.length;
}
于 2013-05-30T13:43:37.213 回答