javascriptで、タブのクリック時に変数の値を変更したい

###前提・実現したいこと
タブのクリック時に、変数minNum・maxNum・disNumの値を動的に変更したい。

###該当のソースコード
以下はタブ部分のhtml

html
1<div id="tabSec">
2	<ul>
3		<li id="tab1">タブ１</li>
4		<li id="tab2">タブ２</li>
5		<li id="tab3">タブ３</li>
6	</ul>
7</div>

以下は取得したい数値の箇所のhtml
※タブのクリックでclass="min"とclass="max"それぞれのspanの中に入っている数字が動的に変化します（後述）。

html
1<div id="numSec01">
2	<div class="min"><span>11</span></div>
3	<div class="max"><span>86</span></div>
4	<div class="bar">
5		<a class="tgl">あああ</a>
6	</div>
7</div>
8
9<div id="numSec02">
10	<div class="min"><span>26</span></div>
11	<div class="max"><span>98</span></div>
12	<div class="bar">
13		<a class="tgl">あああ</a>
14	</div>
15</div>
16
17<div id="numSec03">
18	<div class="min"><span>10</span></div>
19	<div class="max"><span>184</span></div>
20	<div class="bar">
21		<a class="tgl">あああ</a>
22	</div>
23</div>

以下はタブのクリックでclass="min"とclass="max"の数値を変更するjQuery

javascript
1let tabEv = {
2	init: function () {
3		let elm1 = new Object({});
4		elm1.minW = 11;
5		elm1.maxW = 86;
6		elm1.minD = 26;
7		elm1.maxD = 98;
8		elm1.minH = 10;
9		elm1.maxH = 184;
10
11		let elm2 = new Object({});
12		elm2.minW = 10;
13		elm2.maxW = 76;
14		elm2.minD = 22;
15		elm2.maxD = 87;
16		elm2.minH = 8;
17		elm2.maxH = 50;
18
19		let elm3 = new Object({});
20		elm3.minW = 9;
21		elm3.maxW = 64;
22		elm3.minD = 21;
23		elm3.maxD = 89;
24		elm3.minH = 2;
25		elm3.maxH = 55;
26
27		$('#tab1,#tab2,#tab3').on('click', function () {
28				if ($(this).is('#tab1')) {
29					$('#numSec01').find('.min span').html(elm1.minW);
30					$('#numSec01').find('.max span').html(elm1.maxW);
31					$('#numSec02').find('.min span').html(elm1.minD);
32					$('#numSec02').find('.max span').html(elm1.maxD);
33					$('#numSec03').find('.min span').html(elm1.minH);
34					$('#numSec03').find('.max span').html(elm1.maxH);
35				}
36
37				if ($(this).is('#tab2')) {
38					$('#numSec01').find('.min span').html(elm2.minW);
39					$('#numSec01').find('.max span').html(elm2.maxW);
40					$('#numSec02').find('.min span').html(elm2.minD);
41					$('#numSec02').find('.max span').html(elm2.maxD);
42					$('#numSec03').find('.min span').html(elm2.minH);
43					$('#numSec03').find('.max span').html(elm2.maxH);
44				}
45
46				if ($(this).is('#tab3')) {
47					$('#numSec01').find('.min span').html(elm3.minW);
48					$('#numSec01').find('.max span').html(elm3.maxW);
49					$('#numSec02').find('.min span').html(elm3.minD);
50					$('#numSec02').find('.max span').html(elm3.maxD);
51					$('#numSec03').find('.min span').html(elm3.minH);
52					$('#numSec03').find('.max span').html(elm3.maxH);
53				}
54		});
55	},
56};
57tabEv.init();

以下は、class="min"とclass="max"の数値を取得するjQuery

javascript
1let barEv = {
2	selector: '.bar .tgl',
3	$element: null,
4	init: function () {
5		let $element = $(this.selector);
6		$($element).each(function () {
7			let ref =  $(this).parent().parent();
8			let minNum = Number(ref.find('.min span').text()); //ここの変数の値を変更したい
9			let maxNum = Number(ref.find('.max span').text()); //ここの変数の値を変更したい
10			let disNum =  maxNum - minNum; //ここの変数の値を変更したい
11		});
12	},
13};
14barEv.init();

以上です。

理想は、タブをクリックするたびに変数minNum・maxNum・disNumの値を変更したい（#tab1のクリックでelm1を参照、#tab2でelm2を参照、#tab3でelm3を参照）のですが、現状だとデフォルトで表示している数値のみを取得したままとなっています。

このように変数の値を変更することは、可能でしょうか？

###補足事項
変数minNum・maxNum・disNumに関してはbarEv = {}の中の他箇所でも利用します。

Lhankor_Mhy

2017/10/20 04:06

minNum 等を関数にするのはダメなんですか？

退会済みユーザー

2017/10/20 04:15

ご指摘ありがとうございます。関数にすることで実現できるのであれば特に問題はありません。自分は初心者のためいまいちまだそのあたりが理解できず、どのようにすれば良いか分からずにいます。

Lhankor_Mhy

2017/10/20 04:43

let minNum = function(){return Number(ref.find('.min span').text());} とすれば関数になると思うのですが。いずれにせよ、ご提示のコードだけでは動かないので、他の部分でよきにはからっているんですよね？　その辺りがはっきりしないと適切な解答を得るのは難しいかと思いますよ。