タブごとのイベント処理について

初めてのオリジナルサイトを制作しています。
形としては思ったように作ることができたのですが、タブごとのイベントの設定を同じような関数の数値をいじったものを複製したためコードが長くあまりきれいではないコードになってしまいました。
これらをきれいにまとめる方法はあるのでしょうか。それともタブごとにイベントを用意するしかないのでしょうか。教えていただけると幸いです。

javascript
1コード
2/*タブの作成*/
3const showTab = (selector) => {
4    console.log(selector);
5
6    $('.tabs-menu > div').removeClass('active');
7    $('.tabs-content > div').hide();
8    $(`.tabs-menu div[id="${selector}"]`).addClass('active');
9
10    if (selector === 'tab-menu-mon') {
11        $('#tabs-mon').show();
12    }
13    else if (selector === 'tab-menu-tue') {
14        $('#tabs-tue').show();
15    }
16    else if (selector === 'tab-menu-wed') {
17        $('#tabs-wed').show();
18    }
19    else if (selector === 'tab-menu-thu') {
20        $('#tabs-thu').show();
21    }
22    else if (selector === 'tab-menu-fri') {
23        $('#tabs-fri').show();
24    }
25    else if (selector === 'tab-menu-sat') {
26        $('#tabs-sat').show();
27    }
28    else if (selector === 'tab-menu-sun') {
29        $('#tabs-sun').show();
30    }
31};
32$('.tabs-menu div').on('click', (e) => {
33    const selector = $(e.target).attr('id');
34    showTab(selector);
35});
36showTab('tab-menu-mon');
37
38/*DOM要素を取得*/
39const buttonAdd = document.getElementsByClassName('button')[0];
40const box = document.getElementsByClassName('box')[0];
41const menu = document.getElementsByClassName('menu')[0];
42
43/*メニューを消す*/
44const removeMenu = removeButton => {
45    const targetMenu = removeButton.closest('li');
46    box.removeChild(targetMenu);
47};
48
49/*メニューを達成*/
50const completeMenu = compButton => {
51    const targetTask = compButton.closest('li');
52    targetTask.classList.add('isComplete');
53    targetTask.removeChild(compButton);
54    window.alert('トレーニングお疲れ様でした！');
55};
56
57/*ボタンの機能を設定*/
58const addMenu = task => {
59    const listItem = document.createElement('li');
60    const removeButton = document.createElement('button');
61    const compButton = document.createElement('button');
62
63    removeButton.innerText = '削除';
64    removeButton.addEventListener('click', () => removeMenu(removeButton));
65
66    compButton.innerText = '完了';
67    compButton.addEventListener('click', () => completeMenu(compButton));
68
69    listItem.innerText = task;
70    listItem.append(removeButton);
71    listItem.append(compButton);
72    box.appendChild(listItem);
73};
74
75/*登録ボタンの設定*/
76buttonAdd.addEventListener('click', event => {
77    const task = menu.value;
78    addMenu(task);
79    menu.value = '';
80});
81
82$('.button').on('click', function() {
83    alert("メニューが登録されました！");
84});
85
86const buttonAdd1 = document.getElementsByClassName('button')[1];
87const box1 = document.getElementsByClassName('box')[1];
88const menu1 = document.getElementsByClassName('menu')[1];
89
90/*メニューを消す*/
91const removeMenu1 = removeButton => {
92    const targetMenu1 = removeButton.closest('li');
93    box1.removeChild(targetMenu1);
94};
95
96/*メニューを達成*/
97const completeMenu1 = compButton => {
98    const targetTask = compButton.closest('li');
99    targetTask.classList.add('isComplete');
100    targetTask.removeChild(compButton);
101    window.alert('トレーニングお疲れ様でした！');
102};
103
104/*ボタンの機能を設定*/
105const addMenu1 = task => {
106    const listItem = document.createElement('li');
107    const removeButton = document.createElement('button');
108    const compButton = document.createElement('button');
109
110    removeButton.innerText = '削除';
111    removeButton.addEventListener('click', () => removeMenu1(removeButton));
112
113    compButton.innerText = '完了';
114    compButton.addEventListener('click', () => completeMenu1(compButton));
115
116    listItem.innerText = task;
117    listItem.append(removeButton);
118    listItem.append(compButton);
119    box1.appendChild(listItem);
120};
121
122/*登録ボタンの設定*/
123buttonAdd1.addEventListener('click', event => {
124    const task = menu1.value;
125    addMenu1(task);
126    menu1.value = '';
127});
128
129const buttonAdd2 = document.getElementsByClassName('button')[2];
130const box2 = document.getElementsByClassName('box')[2];
131const menu2 = document.getElementsByClassName('menu')[2];
132
133/*メニューを消す*/
134const removeMenu2 = removeButton => {
135    const targetMenu2 = removeButton.closest('li');
136    box2.removeChild(targetMenu2);
137};
138
139/*メニューを達成*/
140const completeMenu2 = compButton => {
141    const targetTask = compButton.closest('li');
142    targetTask.classList.add('isComplete');
143    targetTask.removeChild(compButton);
144    window.alert('トレーニングお疲れ様でした！');
145};
146
147/*ボタンの機能を設定*/
148const addMenu2 = task => {
149    const listItem = document.createElement('li');
150    const removeButton = document.createElement('button');
151    const compButton = document.createElement('button');
152
153    removeButton.innerText = '削除';
154    removeButton.addEventListener('click', () => removeMenu2(removeButton));
155
156    compButton.innerText = '完了';
157    compButton.addEventListener('click', () => completeMenu2(compButton));
158
159    listItem.innerText = task;
160    listItem.append(removeButton);
161    listItem.append(compButton);
162    box2.appendChild(listItem);
163};
164
165/*登録ボタンの設定*/
166buttonAdd2.addEventListener('click', event => {
167    const task = menu2.value;
168    addMenu2(task);
169    menu2.value = '';
170});
171
172const buttonAdd3 = document.getElementsByClassName('button')[3];
173const box3 = document.getElementsByClassName('box')[3];
174const menu3 = document.getElementsByClassName('menu')[3];
175省略…
176

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

回答1件

ベストアンサー

コードの全体像が分かりませんが、同じ処理はまとめられます。

js
1/*タブの作成*/
2const showTab = (selector) => {
3    console.log(selector);
4
5    $('.tabs-menu > div').removeClass('active');
6    $('.tabs-content > div').hide();
7    $(`.tabs-menu div[id="${selector}"]`).addClass('active');
8
9    const day = selector.replace(/^tab-menu-/, '');
10    $(`#tabs-${day}`).show();
11};
12$('.tabs-menu div').on('click', (e) => {
13    const selector = $(e.target).attr('id');
14    showTab(selector);
15});
16showTab('tab-menu-mon');
17
18$('.button').on('click', function() {
19    alert("メニューが登録されました！");
20});
21
22function setEvents(buttonAdd, box, menu) {
23    /*メニューを消す*/
24    const removeMenu = removeButton => {
25        const targetMenu = removeButton.closest('li');
26        box.removeChild(targetMenu);
27    };
28
29    /*メニューを達成*/
30    const completeMenu = compButton => {
31        const targetTask = compButton.closest('li');
32        targetTask.classList.add('isComplete');
33        targetTask.removeChild(compButton);
34        window.alert('トレーニングお疲れ様でした！');
35    };
36
37    /*ボタンの機能を設定*/
38    const addMenu = task => {
39        const listItem = document.createElement('li');
40        const removeButton = document.createElement('button');
41        const compButton = document.createElement('button');
42
43        removeButton.innerText = '削除';
44        removeButton.addEventListener('click', () => removeMenu(removeButton));
45
46        compButton.innerText = '完了';
47        compButton.addEventListener('click', () => completeMenu(compButton));
48
49        listItem.innerText = task;
50        listItem.append(removeButton);
51        listItem.append(compButton);
52        box.appendChild(listItem);
53    };
54
55    /*登録ボタンの設定*/
56    buttonAdd.addEventListener('click', event => {
57        const task = menu.value;
58        addMenu(task);
59        menu.value = '';
60    });
61}
62
63/*DOM要素を取得*/
64const buttonAdd = document.getElementsByClassName('button');
65const box = document.getElementsByClassName('box');
66const menu = document.getElementsByClassName('menu');
67const length = buttonAdd.length;
68for (let i = 0; i < length; ++i) {
69    setEvents(buttonAdd[i], box[i], menu[i]);
70}