jQueryでグローバルなthisを使う

Question

jqueryを使ってthisを使った変数を宣言し、
その変数をスコープ外で使うとエラーが発生しますが、これを解消する方法ってありますでしょうか。

  $(document).on('click', '.other-list', function(){
    var reviewListTitle = $(this).text();
    var reviewListTitleIndex = $(this).index();
    page3.navi.pushPage('other-review-list-page.html');
  }
  $(document).on('pageinit', '#other-review-list-page', function(){
    $('#review-grouptitle').text(reviewListTitle);
    $('#other-review-contents-wrapper ons-list').empty();
    var reviewContentsArray = (reviewListTitleIndex == 0)? compulsoryReview:
                              (reviewListTitleIndex == 1)? compulsoryChooseReview:
                              (reviewListTitleIndex == 2)? generalEducationReview:
                              (reviewListTitleIndex == 3)? labReview:null;
  }

イメージとしては上のように、thisを使った変数reviewListTitleを他の場所でも使いたいのですが、$(document).on(){}の外に出ると使えなくなります。
またthisを使うので、$(document).on(){}の外で宣言してグローバル変数にすることもできません。

また、varなしで宣言すると「not defined」というエラーが出ます。
どうにもならないので、無理やり以下のようにしていました。

  $(document).on('click', '.other-list', function(){
    var reviewListTitle = $(this).text();
    var reviewListTitleIndex = $(this).index();
    page3.navi.pushPage('other-review-list-page.html');
    $(document).on('pageinit', '#other-review-list-page', function(){
      $('#review-grouptitle').text(reviewListTitle);
      $('#other-review-contents-wrapper ons-list').empty();

      var reviewContentsArray = (reviewListTitleIndex == 0)? compulsoryReview:
                                (reviewListTitleIndex == 1)? compulsoryChooseReview:
                                (reviewListTitleIndex == 2)? generalEducationReview:
                                (reviewListTitleIndex == 3)? labReview:null;
      }
    }
  }

最初は良かったのですが、ここでは端折っていますがこの入れ子が重なることで他のエラーが発生しました。
何か解決策はないでしょうか。
よろしくお願いします。

Answer 1

こういうことでしょうか。

  var reviewListTitle = '';
  var reviewListTitleIndex = '';
  $(document).on('click', '.other-list', function(){
    reviewListTitle = $(this).text();
    reviewListTitleIndex = $(this).index();
    page3.navi.pushPage('other-review-list-page.html');
  }
  $(document).on('pageinit', '#other-review-list-page', function(){
    $('#review-grouptitle').text(reviewListTitle);
    $('#other-review-contents-wrapper ons-list').empty();
    var reviewContentsArray = (reviewListTitleIndex == 0)? compulsoryReview:
                              (reviewListTitleIndex == 1)? compulsoryChooseReview:
                              (reviewListTitleIndex == 2)? generalEducationReview:
                              (reviewListTitleIndex == 3)? labReview:null;
  }

Comments

[退会済みユーザー]

あｗｗｗめっちゃ単純でしたねｗｗ
今後も悩みそうなところなので今のうちに気づけて良かったです
ありがとうございました。

Answer 2

関数スコープ内の this は「関数呼び出しされた時に生成されるオブジェクト」であり、関数呼び出しが終了すればオブジェクトは破棄されます。
jQuery#on はイベントが発火した時にコールバック関数を呼び出すので、イベントが発火した時に生成され、イベント終了時に破棄される事になります。

「click イベントハンドラ」と「pageinitイベントハンドラ」では実行タイミングが違いますので、お互いのハンドラ内の this 値を参照することは出来ません。
clickハンドラ内の this は .other-list を参照しているので、それぞれ独立にDOMから参照して下さい。

Re: cloudspider さん