jqueryデータの無い要素にメッセージを表示する [data-filter]

javadcriptで、data-filterのnewyorkが無かった場合に、空欄が表示されるのですが、

これを”少々お待ちください”みたいなメッセージを出すにはどうすればいいでしょうか？

html
1<div class="store_btn">
2  <a href="" data-filter="all" class="active">ALL</a>
3  <a href="" data-filter="newyork">NEWYORK</a>
4  <a href="" data-filter="kanto">関東</a>
5  <a href="" data-filter="tokai_kinki">東海・近畿</a>
6</div>
7<div class="stores">
8  <div class="shop_glid">
9    <div class="shop_contents" data-category="kanto">
10      <div class="shop_logo">
11        <img src="/5ef6fa98e317f/roku.png" alt="">
12      </div>
13      <div class="shop_name">
14        6(roku) beauty&youth
15      </div>
16      <div class="shop_area">
17        渋谷CATSTREET店
18      </div>
19    </div>
20    <div class="shop_contents" data-category="kanto">
21      <div class="shop_logo">
22        <img src="/5ef6fa98e317f/roku.png" alt="">
23      </div>
24      <div class="shop_name">
25        6(roku) beauty&youth
26      </div>
27      <div class="shop_area">
28        NEWoMAN新宿店
29      </div>
30    </div>
31    <div class="shop_contents" data-category="tokai_kinki">
32      <div class="shop_logo">
33        <img src="/5ef6fa98e317f/roku.png" alt="">
34      </div>
35      <div class="shop_name">
36        6(roku) beauty&youth
37      </div>
38      <div class="shop_area">
39        LUCUA大阪店
40      </div>
41    </div>
42  </div>
43</div>

jquery
1$(function() {
2  var $btn = $('.store_btn [data-filter]'),
3    $list = $('.shop_glid [data-category]');
4
5  $btn.on('click', function(e) {
6    e.preventDefault();
7
8    var $btnTxt = $(this).attr('data-filter');
9
10    $($btn).removeClass('active');
11    $(this).addClass('active');
12    
13    if ($btnTxt == 'all') {
14      $list.fadeOut().promise().done(function() {
15        $list.addClass('animate').fadeIn();
16      });
17    } else {
18      $list.fadeOut().promise().done(function() {
19        $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
20      });
21    }
22  });
23});
24

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

回答2件

少々お待ちください

ユーザーがそのメッセージを信じて待っていても何もかわらないなら
ユーザビリティとしては最悪です。
「当該データはありません」的なメッセージにしてください

処理的には予めそういう要素をつくっておいて表示したり消したりするか
都度要素を作ったり、削除したりするかのどちらかです

投稿2020/06/27 13:28

yambejp

総合スコア116734

kaoru_tujimiya

2020/06/27 13:34

コメントありがとうございます。実際には、データがありませんと表示する予定です。。。不足部分があり申し訳ありませんでした、、

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

ベストアンサー

該当データがないときの表示エリアを作って、
該当データがないときはそれを表示する感じでいけると思います。

HTML
1<div class="store_btn">
2  <a href="" data-filter="all" class="active">ALL</a>
3  <a href="" data-filter="newyork">NEWYORK</a>
4  <a href="" data-filter="kanto">関東</a>
5  <a href="" data-filter="tokai_kinki">東海・近畿</a>
6</div>
7<div class="stores">
8  <div class="shop_glid">
9    <div class="no_data" style="display:none;">
10       <!-- 該当データがないときの表示 -->
11       少々お待ちください
12    </div>
13    <div class="shop_contents" data-category="kanto">
14      <div class="shop_logo">
15        <img src="/5ef6fa98e317f/roku.png" alt="">
16      </div>
17      <div class="shop_name">
18        6(roku) beauty&youth
19      </div>
20      <div class="shop_area">
21        渋谷CATSTREET店
22      </div>
23    </div>
24    <div class="shop_contents" data-category="kanto">
25      <div class="shop_logo">
26        <img src="/5ef6fa98e317f/roku.png" alt="">
27      </div>
28      <div class="shop_name">
29        6(roku) beauty&youth
30      </div>
31      <div class="shop_area">
32        NEWoMAN新宿店
33      </div>
34    </div>
35    <div class="shop_contents" data-category="tokai_kinki">
36      <div class="shop_logo">
37        <img src="/5ef6fa98e317f/roku.png" alt="">
38      </div>
39      <div class="shop_name">
40        6(roku) beauty&youth
41      </div>
42      <div class="shop_area">
43        LUCUA大阪店
44      </div>
45    </div>
46  </div>
47</div>

JavaScript
1$(function() {
2  var $btn = $('.store_btn [data-filter]'),
3    $list = $('.shop_glid [data-category]');
4
5  $btn.on('click', function(e) {
6    e.preventDefault();
7
8    var $btnTxt = $(this).attr('data-filter');
9
10    $($btn).removeClass('active');
11    $(this).addClass('active');
12
13    $(".no_data").hide(); // 該当データがないときの表示は消す
14
15    if ($btnTxt == 'all') {
16      $list.fadeOut().promise().done(function() {
17        $list.addClass('animate').fadeIn();
18      });
19    } else {
20      $list.fadeOut().promise().done(function() {
21        if ($list.filter('[data-category = "' + $btnTxt + '"]').length == 0) {
22          // 該当データがないとき
23          $(".no_data").addClass('animate').fadeIn();
24        }
25        else {
26          // 該当データがあるとき
27          $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
28        }
29      });
30    }
31  });
32});