JSにて状態を管理して、全て「完了」になった場合と１つでも「未完了」がある場合とて表示を切り替えたい。

実現したいこと

上から３つのボックスを順に並べており、以下状態を表しています。

◆グレーアウト・・・完了
◆青枠・・・確認中
◆グレー枠・・・待機

現状テスト２の「こちら」（テスト１の「こちら」リンクは特に意味なし）のリンクをクリックするとクリックした対象のボックスは完了済＋グレーアウトし、次確認事項の直下のボックス（テスト３）が青枠で囲って選択されているようなスタイルになるようにしています。

jsの知識が浅く、classList()を使用してスタイルを切り替えており正しい挙動はしてのですが、もっと良いやり方があればご教示いただけると幸いです・・

今回、テスト２とテスト３に状態を持たせて全て「完了＋グレーアウト」となった場合・・・
「全て完了した方はこちら」という文言を一番下に表示。

上記以外（未完了が１つでもある場合）は・・・
「未完了の方は上記を全て完了にしてください」という文言を表示。

状態を持たせて、表示を切り替える方法が分からず行き詰まってしまっております・・

分かる方いらっしゃいましたらお力添えを頂きたいです。

以上、よろしくお願い致します。

該当のソースコード

html
1<div id="test1" class="gray">
2    <div>
3      <div class="main">
4        <ul class="center">
5          <h1 class="inner_ttl">テスト１</h1>
6          <a href="#" class="link_txt" value="a">こちら</a>
7        </ul>
8      </div>
9      <p class="txt">完了</p>
10    </div>
11  </div>
12  <div id="test2" class="blue">
13    <div>
14      <div class="main">
15        <ul class="center">
16          <h1 class="inner_ttl">テスト２</h1>
17          <a href="#" class="link_txt" value="b" onclick="cl1()">こちら</a>
18        </ul>
19      </div>
20      <p class="txt">確認中</p>
21    </div>
22  </div>
23  <div id="dsp1" class="blue" style="display: none; border: none; background-color: gray;">
24    <div>
25      <div class="main">
26        <ul class="center">
27          <h1 class="inner_ttl">テスト2</h1>
28        </ul>
29      </div>
30      <p class="txt">完了</p>
31    </div>
32  </div>
33  <div id="test3" class="red">
34    <div>
35      <div class="main">
36        <ul class="center">
37          <h1 class="inner_ttl">テスト３</h1>
38          <a href="#" class="link_txt" value="c" onclick="cl2()">こちら</a>
39        </ul>
40      </div>
41      <p class="txt">待機</p>
42    </div>
43  </div>
44  <div id="dsp2" class="red" style="display: none; background-color: gray;">
45    <div>
46      <div class="main">
47        <ul class="center">
48          <h1 class="inner_ttl">テスト３</h1>
49        </ul>
50      </div>
51      <p class="txt">完了</p>
52    </div>
53  </div>

css
1.gray{
2    border-radius: 5px;
3    background-color: gray;
4    padding: 20px 25px;
5    margin: 30px;
6}
7
8.blue{
9    border-radius: 5px;
10    background-color: #fff;
11    padding: 20px 25px;
12    border: 2px solid blue;
13    margin:20px 0px;
14    margin: 30px;
15}
16
17.red{
18    border-radius: 5px;
19    background-color: #fff;
20    padding: 20px 25px;
21    border: 2px solid #eee;
22    margin: 30px;
23}
24
25.txt{
26    font-size: 16px;
27}
28
29.main{
30    display: flex;
31}
32
33.center{
34    width: 100%;
35    display: flex;
36    justify-content: space-between;
37    align-items: center;
38}
39
40.inner_ttl{
41    font-size: 14px;
42}
43
44.link_txt{
45    color: black;
46    cursor: pointer;
47}
48
49.none{
50    display: none;
51}
52
53.dsp1{
54    display: block!important;
55}
56
57.dsp2{
58    display: block!important;
59}
60
61.blue{
62    border: 2px solid blue;
63}

js
1function cl1() {
2    let test2 = document.getElementById("test2");
3    let test3 = document.getElementById("test3");
4    let dsp1 = document.getElementById("dsp1");
5
6    test2.classList.add('none');
7    test3.classList.add('blue');
8    dsp1.classList.add('dsp1');
9}
10
11function cl2() {
12    let test3 = document.getElementById("test3");
13    let dsp2 = document.getElementById("dsp2");
14
15    test3.classList.add('none');
16    dsp2.classList.add('dsp2');
17}

Zuishin

2022/07/19 12:55

https://teratail.com/questions/p7iq28nh8b8fa2

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

回答2件

ベストアンサー

いろいろアプローチ方法はあると思いますがカスタムデータをつかった一例

javascript
1<style>
2[data-status]{
3  border-radius: 5px;
4  background-color:white;
5  border: 2px solid gray;
6}
7[data-status="complete"]{
8  background-color: gray;
9}
10[data-status="confirm"]{
11  border: 2px solid blue;
12}
13[data-status="complete"] .txt:before{
14content:"完了";
15}
16[data-status="confirm"] .txt:before{
17content:"確認";
18}
19[data-status="wait"] .txt:before{
20content:"待機";
21}
22.complete ~ p{
23display:none;
24}
25
26</style>
27<script>
28document.addEventListener('click', e=>{
29  const t=e.target;
30  if(t.matches('.link_txt')){
31    e.preventDefault();
32    const p=t.closest('[data-status]');
33    if(p.dataset.status=='confirm'){
34      p.dataset.status='complete';
35      if(p.nextElementSibling){
36        p.nextElementSibling.dataset.status='confirm';
37      }else{
38        p.closest('.container').classList.add('complete');
39      }
40    }
41  }
42});
43</script>
44<div class="container">
45<div id="test1" data-status="complete">
46<div class="main">
47<h1 class="inner_ttl">テスト１</h1>
48<a href="#" class="link_txt">こちら</a>
49</div>
50<p class="txt"></p>
51</div>
52<div id="test2" data-status="confirm">
53<div class="main">
54<h1 class="inner_ttl">テスト２</h1>
55<a href="#" class="link_txt">こちら</a>
56</div>
57<p class="txt"></p>
58</div>
59<div id="test3" data-status="wait">
60<div class="main">
61<h1 class="inner_ttl">テスト３</h1>
62<a href="#" class="link_txt">こちら</a>
63</div>
64<p class="txt"></p>
65</div>
66<div id="test4" data-status="wait">
67<div class="main">
68<h1 class="inner_ttl">テスト４</h1>
69<a href="#" class="link_txt">こちら</a>
70</div>
71<p class="txt"></p>
72</div>
73</div>
74</div>
75<p>全て完了にして</p>