結論
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); /* 元に戻す */ });
}
));