javascript - テーブルデータの背景色をワンクリックで追加・削除(td)

Question

テーブルデータに背景色を設定するためにjqueryを使用していますが、正常に機能していますが、ユーザーがtdを再度クリックすると、色の選択を解除する必要があります。色を追加するための私のスクリプトです。

java script:
  jQuery('td').click(function () { $(this).addClass('active'); });

my css class:
.active{background-color:red;}

ユーザーが再度 td をクリックすると、クラスが削除されます。これを達成する方法。

Answer 1

使用できます

$(this).removeClass('active');

すでにアクティブになっているかどうかを確認する必要がありますが、コードは次のようになります。

jQuery('td').click(function () { 
  if($(this).hasClass('active') { 
    $(this).removeClass('active'); 
  } else {
    $(this).addClass('active'); 
  }
});

編集：

@Justiceの方が正しいです：

jQuery('td').click(function () { $(this).toggleClass('active'); });

Answer 2

jQuery('td').click(function () { $(this).toggleClass('active'); });

toggleClass は、存在しない場合は追加し、存在する場合は削除します。