『該当画像がなければタイトルも非表示にする』を実装したい【checkbox】

前提・実現したいこと

checkboxで各ラベルに対応する表題(今回の例ではチワワor柴犬に当たる)が画像と共にセットで表示されるようにし、該当画像がなければ表題を非表示にしたいです。表題と画像のセット表示までは出来たのですが、該当画像がないときの非表示の方法が分からなかったです。

初心者ながら色々調べて試してみましたが、解決できなかったのでこちらで質問させて頂きました。

詳細

例えば『小型』を選択時にその小型犬が『チワワ』なのか『柴犬』なのかを画像と共に明示し、該当画像がなければ表題を非表示にしたいです。『小型』の場合は柴犬の該当画像が一枚もないので『柴犬』の文字を非表示にしたいです。

該当のソースコード

HTML
1        <form id="form">
2                <div class="search-box brand">
3                        <h2 class="search-box_label">犬種</h2>
4                        <ul>
5                                <li><input type="checkbox" name="brand" value="チワワ" id="chihuahua"><label for="chihuahua"
6                                                class="label">チワワ</label></li>
7                                <li><input type="checkbox" name="brand" value="柴犬" id="shibainu"><label for="shibainu"
8                                                class="label">柴犬</label></li>
9                        </ul>
10                </div>
11                <div class="search-box size">
12                        <h2 class="search-box_label">サイズ</h2>
13                        <ul>
14                                <li><input type="checkbox" name="size" value="小型" id="white"><label for="white"
15                                                class="label">小型</label>
16                                </li>
17                                <li><input type="checkbox" name="size" value="大型" id="brown"><label for="brown"
18                                                class="label">大型</label>
19                                </li>
20                        </ul>
21                </div>
22                <div class="search-box type">
23                        <h2 class="search-box_label">種別</h2>
24                        <ul>
25                                <li><input type="checkbox" name="type" value="赤ちゃん" id="baby"><label for="baby"
26                                                class="label">赤ちゃん</label>
27                                </li>
28                                <li><input type="checkbox" name="type" value="大人" id="adult"><label for="adult"
29                                                class="label">大人</label>
30                                </li>
31                        </ul>
32                </div>
33                <div class="reset">
34                        <input type="reset" name="reset" value="リセット" class="reset-button">
35                </div>
36        </form>
37        <ul class="list">
38
39                    <h2>チワワ</h2>
40
41          <div class="tiwawa">
42                <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="赤ちゃん"><img
43                                src="https://drive.google.com/uc?export=view&id=1SfPXI96_ijo0OFV7N05vszKOYc_SN644"
44                                                                                                        alt=""><a class="open"></a></li>
45                <li class="list_item list_toggle" data-brand="チワワ" data-size="大型" data-type="赤ちゃん"><a class="open"><img
46                                src="https://drive.google.com/uc?export=view&id=17yGYCWdiEdCI6xz2BAJN3Q2sQrM71akw"
47                                alt=""></a></li>
48                <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="赤ちゃん"><a class="open"><img
49                                src="https://drive.google.com/uc?export=view&id=1KUFSriI2NznjH2oR0NCBZIDNAHU-MHz1"
50                                alt=""></a></li>
51                <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="大人"><a class="open"><img
52                                src="https://drive.google.com/uc?export=view&id=131yXqBtOqbHJ0NirmnA0lFbS92HON_kV"
53                                alt=""></a></li>
54          </div>
55
56                    <h2>柴犬</h2>
57
58            <div class="shibaken">
59                <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img
60                                src="https://drive.google.com/uc?export=view&id=13kGzlyG1KNwc0RjVqQ_524FYU3IypC5i"
61                                alt=""></a></li>
62                <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img
63                                src="https://drive.google.com/uc?export=view&id=1XnX7cHGSuGa3DjrkTuLSsvPBC9ZSml21"
64                                alt=""></a></li>
65                <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img
66                                src="https://drive.google.com/uc?export=view&id=1_3QbN0azReVJ_Q814fwtUn0lGg5PUDbw"
67                                alt=""></a></li>
68          </div>
69                <li class="list_item list_toggle no_list"></li>
70
71        </ul>

CSS
1img{
2  max-width: 100%;
3  height: auto;
4}
5ul {
6  padding: 0;
7}
8li {
9  list-style: none;
10}
11form {
12  padding: 10px 10px;
13  background-color:pink;
14}
15form ul {
16  display: block;
17  flex-wrap: wrap;
18}
19input[type="checkbox"] {
20  display: none;
21}
22.brand input[type="checkbox"]:checked + label {
23  background: #ff7bac; 
24}
25.size input[type="checkbox"]:checked + label {
26  background: #3fa9f5;
27}
28.type input[type="checkbox"]:checked + label {
29  background: #fbb03b; 
30}
31.label {
32  display: block; 
33  margin: 5px; 
34  width: 100px;
35  height: 45px; 
36  text-align: center; 
37  line-height: 45px; 
38}
39
40.brand .label {
41  border: 2px solid #ff7bac; 
42
43}
44.size .label {
45  border: 2px solid #3fa9f5; 
46
47}
48.type .label {
49  border: 2px solid #fbb03b;
50
51}
52.is-hide {
53  display: none;
54}
55.list_toggle {
56  display: none;
57}
58.under_line {
59  width: 500px;
60}
61.search-box h2 {
62  margin: 0;
63}
64.reset-button {
65  width: 25%;
66  margin: 20px auto 0;
67  line-height: 30px;
68  background: #ccc;
69  border-radius: 25px;
70  border: none;
71  cursor: pointer;
72}
73.reset-button:hover {
74  background: #999;
75}
76.nothing {
77  display: none;
78}
79.tiwawa,.shibaken{
80  display: grid;
81  grid-gap: 20px;
82  grid-template-columns: repeat(2,minmax(200px,30px));
83}
84.list {
85  display: grid;
86  grid-gap: 20px;
87  grid-template-columns: repeat(2,minmax(200px,20px));
88  background-color: rgb(300, 210, 219);
89  padding: 20px;
90  margin-bottom:40px;
91}
92.list li {
93  width: 200px;
94  height: auto;
95}
96.list.is-hide {
97display: none;
98}
99.list img{
100  height: 200px;
101}
102.open{
103  width: 200px;
104  height: auto;
105}
106.open img{
107  height: 200px;
108}
109
110

JavaScript
1/**
2 * チェックボックスがクリックされた瞬間を拾うコード
3 **/
4$(function() {
5  $(".label").click(function() {
6    $(".list li").removeClass("list_toggle");
7  });
8  if ($(".list li").hasClass("list_toggle")) {
9    $(".reset .reset-button").click(function() {
10      $(".list li").addClass("list_toggle");
11    });
12  }
13});
14
15
16/**
17 * 絞り込み機能
18 **/
19var searchBox = ".search-box"; // 絞り込む項目を選択するエリア
20var listItem = ".list_item"; // 絞り込み対象のアイテム
21var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名
22
23$(function() {
24  // 絞り込み項目を変更した時
25  $(document).on("change", searchBox + " input", function() {
26    search_filter();
27  });
28});
29
30/**
31 * リストの絞り込みを行う
32 */
33$('ul.list').addClass(hideClass);
34function search_filter() {
35    // リスト内の各アイテムをチェック
36    let hasItem = false;
37    let noCheckItem = true; // 何れもチェックされていないかチェック
38    for (let j = 0; j < $(listItem).length; j++) { // リストアイテムの数より小さい間
39        let hitItem = true; // 検索対象 
40        for (let i = 0; i < $(searchBox).length; i++) {
41            let name = $(searchBox)
42                .eq(i)
43                .find("input")
44                .attr("name");
45            // 選択されている項目を取得
46            let searchData = get_selected_input_items(name);
47            // 選択されている項目がない、またはALLを選択している場合は飛ばす
48            if (searchData.length === 0 || searchData[0] === "") {
49                hitItem &= true; // 何もチェックされていなかったら検索絞込から外す
50                continue;
51            }
52            noCheckItem = false; // 何れかチェックされている
53            // アイテムに設定している項目を取得
54            let itemData = $(listItem)
55                .eq(j)
56                .data(name);
57            // 絞り込み対象かどうかを調べる
58            hitItem &= (searchData.indexOf(itemData) !== -1)
59        }
60
61// 各labelをand条件に設定する
62        if (hitItem && !noCheckItem) {
63            $(listItem)
64                .eq(j)
65                .removeClass(hideClass);
66          hasItem = true;
67        } else {
68            $(listItem)
69                .eq(j)
70                .addClass(hideClass);
71        }
72    }
73  $('ul.list').toggleClass(hideClass, !hasItem);
74}
75
76function get_selected_input_items(name) {
77  var searchData = [];
78  $("[name=" + name + "]:checked").each(function() {
79    searchData.push($(this).val());
80  });
81  return searchData;
82}
83
84
85

試したこと

<h2>タグにformの要素(liタグ)を含ませてみました。 →『チワワ』,『柴犬』選択時にしか<h2>タグが表示されなくなってしまいました。。

HTML
1　<form>
2　　・・・
3  </form>
4    <ul class="list">
5          <li class="list_item list_toggle" data-brand="チワワ"> 
6              <h2>チワワ</h2>
7         </li> 
8          <div class="tiwawa">
9　　　        ・・・
10　　　　　</div>
11
12　　　　  <li class="list_item list_toggle" data-brand="柴犬">
13               <h2>柴犬</h2>
14         </li> 
15         <div class="shibaken">
16  　　        ・・・
17　　　   </div>
18        　<li>・・・</li>
19   </ul>

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

回答1件

ベストアンサー

こういうタイプの処理はデータはJS側に持たせるのが良いとは思うのですが、HTMLに記述する方式であれば表示されている要素が0のときに隠す処理をすれば良いと思います。

js
1function search_filter() {
2  // 省略
3  hide_no_items_container($("div.tiwawa"))
4  hide_no_items_container($("div.shibaken"))
5}
6
7function hide_no_items_container(target) {
8  if (target.find(".grid > li:not(.is-hide)").length) {
9    target.removeClass('is-hide')
10  } else {
11    target.addClass('is-hide')
12  }
13}

構造を正しく扱うため、HTMLとCSSに少し手を加えています

html
1<!-- <ul class="list">
2  <h2>チワワ</h2>
3  <div class="tiwawa">
4    <li>省略</li>
5  </div>
6  <h2>柴犬</h2>
7  <div class="shibaken">
8    <li>省略</li>
9  </div>
10</ul> -->
11
12<ul class="list">
13  <div class="tiwawa">
14    <h2>チワワ</h2>
15    <div class='grid'>
16      <li>省略</li>
17    </div>
18  </div>
19
20  <div class="shibaken">
21    <h2>柴犬</h2>
22    <div class='grid'>
23      <li>省略</li>
24    </div>
25  </div>
26</ul>

css
1/* .tiwawa,.shibaken{
2  display: grid;
3  grid-gap: 20px;
4  grid-template-columns: repeat(2,minmax(200px,30px));
5} */
6
7.grid {
8  display: grid;
9  grid-gap: 20px;
10  grid-template-columns: repeat(2, minmax(200px, 30px));
11}
12
13.list {
14  /* display: grid;
15  grid-gap: 20px;
16  grid-template-columns: repeat(2,minmax(200px,20px)); */
17  background-color: rgb(300, 210, 219);
18  padding: 20px;
19  margin-bottom: 40px;
20}

しかし、最初に記述したとおりデータを扱うのであればJS側にデータをもたせるのが一般的で最良です。余裕があればそこから見直すことをおすすめします。

全体のソース

html
1        <form id="form">
2          <div class="search-box brand">
3            <h2 class="search-box_label">犬種</h2>
4            <ul>
5              <li><input type="checkbox" name="brand" value="チワワ" id="chihuahua"><label for="chihuahua" class="label">チワワ</label></li>
6              <li><input type="checkbox" name="brand" value="柴犬" id="shibainu"><label for="shibainu" class="label">柴犬</label></li>
7            </ul>
8          </div>
9          <div class="search-box size">
10            <h2 class="search-box_label">サイズ</h2>
11            <ul>
12              <li><input type="checkbox" name="size" value="小型" id="white"><label for="white" class="label">小型</label>
13              </li>
14              <li><input type="checkbox" name="size" value="大型" id="brown"><label for="brown" class="label">大型</label>
15              </li>
16            </ul>
17          </div>
18          <div class="search-box type">
19            <h2 class="search-box_label">種別</h2>
20            <ul>
21              <li><input type="checkbox" name="type" value="赤ちゃん" id="baby"><label for="baby" class="label">赤ちゃん</label>
22              </li>
23              <li><input type="checkbox" name="type" value="大人" id="adult"><label for="adult" class="label">大人</label>
24              </li>
25            </ul>
26          </div>
27          <div class="reset">
28            <input type="reset" name="reset" value="リセット" class="reset-button">
29          </div>
30        </form>
31        <ul class="list">
32          <div class="tiwawa">
33            <h2>チワワ</h2>
34            <div class='grid'>
35              <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="赤ちゃん"><img src="https://drive.google.com/uc?export=view&id=1SfPXI96_ijo0OFV7N05vszKOYc_SN644" alt=""><a class="open"></a></li>
36              <li class="list_item list_toggle" data-brand="チワワ" data-size="大型" data-type="赤ちゃん"><a class="open"><img src="https://drive.google.com/uc?export=view&id=17yGYCWdiEdCI6xz2BAJN3Q2sQrM71akw" alt=""></a></li>
37              <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="赤ちゃん"><a class="open"><img src="https://drive.google.com/uc?export=view&id=1KUFSriI2NznjH2oR0NCBZIDNAHU-MHz1" alt=""></a></li>
38              <li class="list_item list_toggle" data-brand="チワワ" data-size="小型" data-type="大人"><a class="open"><img src="https://drive.google.com/uc?export=view&id=131yXqBtOqbHJ0NirmnA0lFbS92HON_kV" alt=""></a></li>
39            </div>
40          </div>
41
42
43          <div class="shibaken">
44            <h2>柴犬</h2>
45            <div class='grid'>
46              <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img src="https://drive.google.com/uc?export=view&id=13kGzlyG1KNwc0RjVqQ_524FYU3IypC5i" alt=""></a></li>
47              <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img src="https://drive.google.com/uc?export=view&id=1XnX7cHGSuGa3DjrkTuLSsvPBC9ZSml21" alt=""></a></li>
48              <li class="list_item list_toggle" data-brand="柴犬" data-size="大型" data-type="赤ちゃん"><a class="open"><img src="https://drive.google.com/uc?export=view&id=1_3QbN0azReVJ_Q814fwtUn0lGg5PUDbw" alt=""></a></li>
49            </div>
50          </div>
51          <li class="list_item list_toggle no_list"></li>
52        </ul>
53
54
55        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

js
1/**
2 * チェックボックスがクリックされた瞬間を拾うコード
3 **/
4$(function() {
5  $(".label").click(function() {
6    $(".list li").removeClass("list_toggle");
7  });
8  if ($(".list li").hasClass("list_toggle")) {
9    $(".reset .reset-button").click(function() {
10      $(".list li").addClass("list_toggle");
11    });
12  }
13});
14
15
16/**
17 * 絞り込み機能
18 **/
19var searchBox = ".search-box"; // 絞り込む項目を選択するエリア
20var listItem = ".list_item"; // 絞り込み対象のアイテム
21var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名
22
23$(function() {
24  // 絞り込み項目を変更した時
25  $(document).on("change", searchBox + " input", function() {
26    search_filter();
27  });
28});
29
30/**
31 * リストの絞り込みを行う
32 */
33$('ul.list').addClass(hideClass);
34
35function search_filter() {
36  // リスト内の各アイテムをチェック
37  let hasItem = false;
38  let noCheckItem = true; // 何れもチェックされていないかチェック
39  for (let j = 0; j < $(listItem).length; j++) { // リストアイテムの数より小さい間
40    let hitItem = true; // 検索対象 
41    for (let i = 0; i < $(searchBox).length; i++) {
42      let name = $(searchBox)
43        .eq(i)
44        .find("input")
45        .attr("name");
46      // 選択されている項目を取得
47      let searchData = get_selected_input_items(name);
48      // 選択されている項目がない、またはALLを選択している場合は飛ばす
49      if (searchData.length === 0 || searchData[0] === "") {
50        hitItem &= true; // 何もチェックされていなかったら検索絞込から外す
51        continue;
52      }
53      noCheckItem = false; // 何れかチェックされている
54      // アイテムに設定している項目を取得
55      let itemData = $(listItem)
56        .eq(j)
57        .data(name);
58      // 絞り込み対象かどうかを調べる
59      hitItem &= (searchData.indexOf(itemData) !== -1)
60    }
61
62    // 各labelをand条件に設定する
63    if (hitItem && !noCheckItem) {
64      $(listItem)
65        .eq(j)
66        .removeClass(hideClass);
67      hasItem = true;
68    } else {
69      $(listItem)
70        .eq(j)
71        .addClass(hideClass);
72    }
73  }
74  $('ul.list').toggleClass(hideClass, !hasItem);
75
76  hide_no_items_container($("div.tiwawa"))
77  hide_no_items_container($("div.shibaken"))
78}
79
80function hide_no_items_container(target) {
81  if (target.find(".grid > li:not(.is-hide)").length) {
82    target.removeClass('is-hide')
83  } else {
84    target.addClass('is-hide')
85  }
86}
87
88function get_selected_input_items(name) {
89  var searchData = [];
90  $("[name=" + name + "]:checked").each(function() {
91    searchData.push($(this).val());
92  });
93  return searchData;
94}

css
1img {
2  max-width: 100%;
3  height: auto;
4}
5
6ul {
7  padding: 0;
8}
9
10li {
11  list-style: none;
12}
13
14form {
15  padding: 10px 10px;
16  background-color: pink;
17}
18
19form ul {
20  display: block;
21  flex-wrap: wrap;
22}
23
24input[type="checkbox"] {
25  display: none;
26}
27
28.brand input[type="checkbox"]:checked+label {
29  background: #ff7bac;
30}
31
32.size input[type="checkbox"]:checked+label {
33  background: #3fa9f5;
34}
35
36.type input[type="checkbox"]:checked+label {
37  background: #fbb03b;
38}
39
40.label {
41  display: block;
42  margin: 5px;
43  width: 100px;
44  height: 45px;
45  text-align: center;
46  line-height: 45px;
47}
48
49.brand .label {
50  border: 2px solid #ff7bac;
51
52}
53
54.size .label {
55  border: 2px solid #3fa9f5;
56
57}
58
59.type .label {
60  border: 2px solid #fbb03b;
61
62}
63
64.is-hide {
65  display: none;
66}
67
68.list_toggle {
69  display: none;
70}
71
72.under_line {
73  width: 500px;
74}
75
76.search-box h2 {
77  margin: 0;
78}
79
80.reset-button {
81  width: 25%;
82  margin: 20px auto 0;
83  line-height: 30px;
84  background: #ccc;
85  border-radius: 25px;
86  border: none;
87  cursor: pointer;
88}
89
90.reset-button:hover {
91  background: #999;
92}
93
94.nothing {
95  display: none;
96}
97
98/* .tiwawa,.shibaken{
99  display: grid;
100  grid-gap: 20px;
101  grid-template-columns: repeat(2,minmax(200px,30px));
102} */
103
104.grid {
105  display: grid;
106  grid-gap: 20px;
107  grid-template-columns: repeat(2, minmax(200px, 30px));
108}
109
110.list {
111  background-color: rgb(300, 210, 219);
112  padding: 20px;
113  margin-bottom: 40px;
114}
115
116.list li {
117  width: 200px;
118  height: auto;
119}
120
121.list.is-hide {
122  display: none;
123}
124
125.list img {
126  height: 200px;
127}
128
129.open {
130  width: 200px;
131  height: auto;
132}
133
134.open img {
135  height: 200px;
136}