タブ切り替え後のテーブルでソートが動かくなります

前提・実現したいこと

複数タブでデータの一覧を表示しているページで、
一覧データのソートを行えなくなる事象が発生しており、対処方法がわからない状態です。

対象のページは、初期表示時に、各タブで表示するデータとして、
javascriptにてタブ別のテキストファイルを読み取り、テーブルを作成して表示しています。
表示しているデータ一覧の絞り込みを行う必要があるのですが、
絞り込み対象が、最初に表示されるデータ一覧なってしまうため、タブ切り替え時に、thisのIDを書き換えています。

タブ切り替えは下記のように、タブ押下時、thisのIDを各タブのIDに書き換えています。

tabClick: function() {
var _this = this;
  $("#tabA").click(function(){
    _this.id = "tabAList";
  });
  $("#tabB").click(function(){
    _this.id = "tabBList";
  });
  $("#tabC").click(function(){
    _this.id = "tabCList";
  });
});

ソート時は、ソートボタン押下時、thisのidを元にソート処理の呼び出しを行っています。

setSort: function() {
  var _this = this;
  $("#nameSortAsc" + _this.id).click(function() {
    _this.sortChange(_this.id);
  });
  $("#nameSortDesc" + _this.id).click(function() {
    _this.sortChange(_this.id);
  });
  $("#priceSortAsc" + _this.id).click(function() {
    _this.sortChange(_this.id);
  });
  $("#priceSortDesc" + _this.id).click(function() {
    _this.sortChange(_this.id);
  });
});

発生している問題・エラーメッセージ

１、Aタブでソート
２、Bタブに切り替えてでソート
３、Aタブに戻ってソートするとソートが利かなくなっています。

F12開発ツールにて、操作時の状態を確認したところ、
thisのIDが前タブのIDとなっていたため、ソートが利かなくなってしまったのたと考えています。
１、ソート時のthis.id は tabAList
２、ソート時のthis.id は tabBList
３、ソート時のthis.id は tabBList

上記事象が起きてしまう原因がわからず、どう対処してよいのかわからない状態です。
絞り込みを行うためには、_this.id = "tabAList";のように、IDを書き換える必要があると考えているのですが、
あまりお勧めできないやり方なのでしょうか。
解決方法、または別の方法を教えていただけると助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

idの書き換えは全くお勧めできない。
理由はまさに今あなたのコードが意味不明になっている「それ」だ。変わるものと不変であるものは区別すべきで、idは不変であるべきものだ。
社員番号でも出席番号でもいいが、このようなID番号が変わる事ってないだろ？班分けを変えても出席番号は不変だし、部署が変わっても出世しても社員番号が変わる事はない。ましてや、MTGのたびに座席の並び順で社員番号を振り直す会社などない。

「data-なんとか」みたいな属性はJS書く奴が勝手にいじっていい属性として予約されているので、常識的にはこれを使う。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

具体的なコードは、提示されているコードが少なさ過ぎて提示不可能だ。

投稿2020/12/22 12:53