LoginSignup
0
0

More than 1 year has passed since last update.

onchangeイベントで確認ダイアログの結果に応じてキャンセル with jQuery

Last updated at Posted at 2021-10-14

結論

Deferredとクロージャ使った。
もっとベターなやり方は山ほどありそう。

なりゆき

やっほー☆フロント側をjQueryだけで開発しているみんな、こんにちは!
なんでこんなことになっているんだろうね!?うらむならプロジェクトをうらもう⭐️

突然だけど、プルダウンの変更時、変更前の情報を知りたいと思ったことはないかい!?

んー、そう?

ぼくはあります!今まで何度もありました!ていうか今日もありました!

んでまあ、過去の実装を参照してもいいんですけど、今の自分ならどうするか、って考えてあんまりみないことにしました。jQueryのみでなんとかしていることから分かる通り、プロジェクト自体が緩いので許される・・・・・・と思いたい。

考えたこと

DOM側に情報を持たせる

多分、今までも大体これでやっていたはず。
確定したタイミングで<input type="hidden" id="hidLastValue" />みたいなやつに値を設定するとか。
全然悪くはないし、手っ取り早いし、いいとは思う・・・・・・。

でも責務がぶれてるかなあ・・・・・・?

HTMLは単なる構造化文書であって、サーバー側との送受信項目はまだしも、クライアント側のみで使う値をhiddenやdata-*属性で持たせる・・・・・・。

いや、悪くはない!ぼくも結構その手は使っている!

でも、他に方法はないかなあ・・・・・・?

微妙なプロパティの値を使う

実際全く微妙じゃないかもしれないけど!
調べたら結構あったんですよね、jQueryのこのプロパティは前の値で、DOM要素のこれは今の値、みたいなやつ。

いや、いいと思うんですよ。

でもそれ、コード自体が説明的じゃないよな・・・・・・・。

わたしがみたやつのイメージだと、ほんとわずかな書き方の違いだけでbefore-after切り分けていて、え、これ調べなきゃ前後比較してるってわかんねーだろ、みたいな。
あとそこまでいくと環境依存入らない?みたいな。

わたしなりに頑張る

javascriptで値保持、と言えばグローバル変数。ほんとそれ、ではあるんだけど、書き換え可能。さっきのhiddenとかdata-*もそうだけど、ユーザーが容易に書き換えできるのは、もちろん要件次第ではあるんだけど、どうなの?っていう気持ちが強い。

バニラなjsでカプセル化っぽいことしたかったら、わたしが知る限りはクロージャ。

クロージャ、要するに参照されているかぎり変数生きてる、みたいな技。

以下、思い出しながら書いているので間違っていたらごめんなさい。
letとか使ってみたい

$(document).on('change', '#selectElem', (function() {})(
  var lastValue = document.getElementById('selectElem').value;
  return function(e) {
    var def = new $.Deferred(); // ここのスペル自信ない:)
    confirm(function(result)) {
      result ? def.resolve() : def.reject();
    }); // ここの確認処理でYes/No判定
    def.promise().done(function(){ lastValue = e.taget.value; /* Yesのときは流れのまま */})
    .fail(function() { $('#selectElem').val(lastValue); /* 元に戻す */ });
  }
));
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0