0

jquery を使用して、テーブルの行に行の強調表示を追加しようとしています。1 回のクリック イベントを使用して循環する 3 つの定義済みの色が必要です。たとえば、行が最初に黄色で強調表示されているときにユーザーがクリックすると、別のクリックでオレンジ色に変わり、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() の代わりに、toogleClass を使用しないでください。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');
};

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

このように、3 回目のクリック後に最初のクラスに戻るための動作を追加する必要があります。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 に答える