質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • JavaScript

    21585questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5459questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

データ属性を配列にして、どれか1つでも一致した場合に表示させたい

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 334

html内のデータ属性が、「<select name=…」内の「option value」の値の1つでも一致している場合、画面上に表示するようにしたいと思っております。

しかし実際にデータ属性内の値に配列で複数入れて、jsを実行しても、
一致するどころか、不一致とみなされ、非表示になってしまいます。
エラー等に関しては、特に発生していません

該当のソースコード

<html lang="ja">
<head>
<title>HTML, CSS and JavaScript demo</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="function.js"></script>

</head>
<body>
<div id="page">
    <div class="serchBox">
  <select name="region">
    <option value="">地域を選択</option>
    <option value="matudo">松戸市</option>
    <option value="chiba">千葉市</option>
    <option value="katuura">勝浦市</option>
    <option value="abiko">我孫子市</option>
    <option value="kashiwa">柏市</option>
  </select>
</div>

<ul class="list">
  <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li>
  <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li>
  <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li>
  <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li>
  <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li>
</ul>
</div>
</body>
</html>
$(function() {
    var lists = $('.list li');
    $(document).on('change', '.serchBox select', function() {
        lists.show();
        for (var i = 0; i < $('.serchBox select').length; i++) {
            // 絞り込みの項目を取得
            var item = $('.serchBox select').eq(i).attr('name');
            // 絞り込みの対象を取得
            var target = $('.serchBox select').eq(i).val();

            if(target != '') {
                for (var j = 0; j < lists.length; j++) {
                    // 絞り込み対象でない場合は非表示
                    if(lists.eq(j).find('.' + item).find('span').data('tiiki') !== target) {
                        lists.eq(j).hide();
                    }
                };
            }
        };
    });
});

試したこと

<li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li>
上記のコードのみ、複数の値を入れることで、「"matudo","chiba"」のどちらかの値の場合、表示するようにできないか、試みをしてみました。

実際の挙動
https://codepen.io/satoru1993/pen/gJwYNa

何卒宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/05/13 13:20

    なるほど、ご解決されて何よりです。

    蛇足ですが、
    data-tiiki='matudo chiba'
    data-tiiki='chiba'
    と書くと、
    $('[data-tiiki~=chiba]')で両方拾えます。

    キャンセル

  • キャンセル

  • satoru225Simple

    2019/05/13 13:39

    ありがとうございます!

    キャンセル

回答 5

checkベストアンサー

+1

配列なのでindexOf()などでチェックできませんか?
dataも全部配列にしたほうが扱いやすくなりますが。

<ul class="list">
  <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li>
  <li><p class="region"><span data-tiiki='["chiba"]'>千葉市</span></p></li>
  <li><p class="region"><span data-tiiki='["katuura"]'>勝浦市</span></p></li>
  <li><p class="region"><span data-tiiki='["abiko"]'>我孫子市</span></p></li>
  <li><p class="region"><span data-tiiki='["kashiwa"]'>柏市</span></p></li>
</ul>
$(function() {
    var lists = $('.list li');
    $(document).on('change', '.serchBox select', function() {
        const select_val = $(this).val();
        lists.each(function(index, element){
            if(search($($(element).find('span').get(0)),select_val)){
                $(element).show();
            }else{
                $(element).hide();
            }

        });
    });
    function search(elem,select){
        if (elem.data('tiiki').indexOf(select) >= 0){
            return true;
        }
        return false;
    }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 12:21

    ご返答くださり、ありがとうございます!
    indexOf()と、他の方もご指摘してくださっている、
    全て配列にするというやり方で、
    うまくすることができました。

    キャンセル

  • 2019/05/13 12:23 編集

    データの形式は全て同じにしておいたほうが問題が簡素化されます。
    別の形式が混じる=処理が増える=不具合の混入リスクが高まる
    ですので。

    キャンセル

  • 2019/05/13 13:08

    なるほどです。
    今後違うことを実装する際もデータ形式を
    一緒にすることを意識してみたいと思います。

    キャンセル

+1

単数と複数を同じカスタムデータで処理するのはどうかと思います
ひとつでも["chiba"]などにすれば処理しやすくなるでしょう

配列と文字列をチェック

<script>
$(function(){
  $('[name=region]').on('change',function(){
    var v=$(this).val();
    $('.region').closest('li').hide().filter(function(){
      var tiiki=$(this).find('[data-tiiki]').data('tiiki');
      return tiiki==v || $.inArray(v,tiiki)>=0;
    }).show();
  }).trigger('change');
});
</script>
<div id="page">
    <div class="serchBox">
  <select name="region">
    <option value="">地域を選択</option>
    <option value="matudo">松戸市</option>
    <option value="chiba">千葉市</option>
    <option value="katuura">勝浦市</option>
    <option value="abiko">我孫子市</option>
    <option value="kashiwa">柏市</option>
  </select>
</div>

<ul class="list">
  <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li>
  <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li>
  <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li>
  <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li>
  <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li>
</ul>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 12:08 編集

    一応、配列と文字列の両方をチェックする書き方を追記しておきます
    ただし比較するものの型が違うのは致命的な欠陥につながる可能性もあるので
    注意してください

    キャンセル

  • 2019/05/13 12:16 編集

    ありがとうございます!
    全てを複数にするという考え方はなかったです。
    確かにその方が1つの処理で済むようなので
    簡単なのと、欠陥を出さないためにも
    よさそうですね。

    キャンセル

+1

data-tiikiを、一つの場合も配列にしてあげて、(data-tiiki="[chiba]"とか)判定分を以下にしてあげれば動くと思います。

                    if(lists.eq(j).find('.' + item).find('span').data('tiiki').indexOf(target) === -1) {
                        lists.eq(j).hide();
                    }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 12:18

    ありがとうございます!
    他の方も仰っているように、
    全て配列にするやり方でやってみたいと思います!
    また、わかりやすくコードの修正までしてくださり、
    ありがとうございます!

    キャンセル

+1

こんにちは

とりあえず、ご質問に挙げられているコードを修正するならば、以下で、どうでしょう? 修正対象は、該当しないリストアイテムの条件部分です。

修正前

// 絞り込み対象でない場合は非表示
if(lists.eq(j).find('.' + item).find('span').data('tiiki') !== target) {
    lists.eq(j).hide();
}

修正後

// 絞り込み対象でない場合は非表示
const tiiki = lists.eq(j).find('.' + item).find('span').data('tiiki');
if(tiiki !== target && !tiiki.includes(target)) {
    lists.eq(j).hide();
}

以下にて、修正後の動作を確認できます。

この修正によって、セレクターから「千葉市」を選んだときに、「松戸市」と「千葉市」の2つが表示されるようになります。

以上、参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 12:22

    ありがとうございます!
    このやり方だと、既存の単数と配列でもできるのですね。
    動作も確認いたしました。

    キャンセル

  • 2019/05/13 12:29

    どういたしまして、解決されたようでよかったです。

    data-tiiki属性の値の書き方も修正してよいのであれば、以下もあるかと思いました。
    複数の場合は、

    <span data-tiiki='matudo,chiba'>松戸市</span>

    のように、カンマ区切りで並べておきます。1個の場合は、これまでと同じ

    <span data-tiiki="chiba">千葉市</span>

    のままでよいです。

    上記のようにしておいて、

    // 絞り込み対象でない場合は非表示
    const tiiki = lists.eq(j).find('.' + item).find('span').data('tiiki').split(',');
    if(!tiiki.includes(target)) {
    lists.eq(j).hide();
    }

    とします。
    以下で確認できます。

    https://codepen.io/jun68ykt/pen/JqRjrg?editors=1111

    ご参考まで。

    キャンセル

0

既存仕様の問題点

既存の仕様でも作れなくはないのですが、下記問題があります。

  • JSON形式はセレクタでマッチ出来ず、条件を甘めに設定して絞り込むしかない
  • 単数/複数で書式が異なるので、分岐処理が必須

"chiba" で検索した実装例。

jQuery('[data-tiiki]').filter((i, element) => {
  const tiiki = jQuery(tiiki).data('tiiki');

  return Array.isArray(tiiki) ? tiiki.indexOf('chiba') !== -1 : tiiki === 'chiba';
})

改善案

私なら属性セレクタを使用出来る形式に変更して対応します。
https://triple-underscore.github.io/selectors4-ja.html#attribute-representation

<ul class="list">
  <li><p class="region"><span data-tiiki="matudo chiba">松戸市</span></p></li>
  <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li>
  <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li>
  <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li>
  <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li>
</ul>
<script>
jQuery('[data-tiiki~=chiba]');
</script>

Re: satoru225Simple さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 13:13

    こちらよ
    「属性セレクタを使用出来る形式に変更して対応」
    というのがよくわからないのですが、
    どういうことでしょうか?
    (知識がまだまだ追いついておらず、調べてもよく理解できませんでした。)

    キャンセル

  • 2019/05/13 18:33

    改善案にあるように、<span data-tiiki="matudo chiba"> とマークアップして、属性セレクタでマッチさせるという意味です。
    (低評価理由が不明ですが、コードが動かなかったんですかね…。
    出先で未検証だったので、後で確認します。)

    キャンセル

  • 2019/05/13 20:49

    問題なく動きますね。
    https://codepen.io/anon/pen/pmErBv

    キャンセル

  • 2019/05/20 18:01

    返答が遅くなってしまい申し訳ありませんでした。
    また、検証までしてくださり、ありがとうございました。

    低評価に関してですが、他の方が押されたようで、
    先ほど自分から+1をしたところ、0になりました。

    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21585questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5459questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。