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
});

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

Answer 2

沿着这些方向可能会有什么？

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;
}

Answer 3

为此你不应该使用toogleClass，而是使用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的文档希望它有所帮助

我可以从jquery点击事件中循环事件调用吗？

3 个答案: