Q&A
data-tiiki='["matudo","chiba"]'
この書式は確定ですか？
html内のデータ属性が、「<select name=…」内の「option value」の値の１つでも一致している場合、画面上に表示するようにしたいと思っております。
しかし実際にデータ属性内の値に配列で複数入れて、jsを実行しても、
一致するどころか、不一致とみなされ、非表示になってしまいます。
エラー等に関しては、特に発生していません
該当のソースコード
html
1<html lang="ja"> 2<head> 3<title>HTML, CSS and JavaScript demo</title> 4<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> 5<link rel="stylesheet" type="text/css" href="test.css"> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript" src="function.js"></script> 8 9</head> 10<body> 11<div id="page"> 12 <div class="serchBox"> 13 <select name="region"> 14 <option value="">地域を選択</option> 15 <option value="matudo">松戸市</option> 16 <option value="chiba">千葉市</option> 17 <option value="katuura">勝浦市</option> 18 <option value="abiko">我孫子市</option> 19 <option value="kashiwa">柏市</option> 20 </select> 21</div> 22 23<ul class="list"> 24 <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 25 <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li> 26 <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li> 27 <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li> 28 <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li> 29</ul> 30</div> 31</body> 32</html>
js
1$(function() { 2 var lists = $('.list li'); 3 $(document).on('change', '.serchBox select', function() { 4 lists.show(); 5 for (var i = 0; i < $('.serchBox select').length; i++) { 6 // 絞り込みの項目を取得 7 var item = $('.serchBox select').eq(i).attr('name'); 8 // 絞り込みの対象を取得 9 var target = $('.serchBox select').eq(i).val(); 10 11 if(target != '') { 12 for (var j = 0; j < lists.length; j++) { 13 // 絞り込み対象でない場合は非表示 14 if(lists.eq(j).find('.' + item).find('span').data('tiiki') !== target) { 15 lists.eq(j).hide(); 16 } 17 }; 18 } 19 }; 20 }); 21});
試したこと
<li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 上記のコードのみ、複数の値を入れることで、「"matudo","chiba"」のどちらかの値の場合、表示するようにできないか、試みをしてみました。実際の挙動
https://codepen.io/satoru1993/pen/gJwYNa
何卒宜しくお願い致します。
特に確定というわけではなく、
自分なりに試した結果になります。
なるほど、ご解決されて何よりです。
蛇足ですが、
data-tiiki='matudo chiba'
data-tiiki='chiba'
と書くと、
$('[data-tiiki~=chiba]')で両方拾えます。
ありがとうございます！
回答5件
0
既存仕様の問題点
既存の仕様でも作れなくはないのですが、下記問題があります。
- JSON形式はセレクタでマッチ出来ず、条件を甘めに設定して絞り込むしかない
- 単数/複数で書式が異なるので、分岐処理が必須
"chiba" で検索した実装例。
JavaScript
1jQuery('[data-tiiki]').filter((i, element) => { 2 const tiiki = jQuery(tiiki).data('tiiki'); 3 4 return Array.isArray(tiiki) ? tiiki.indexOf('chiba') !== -1 : tiiki === 'chiba'; 5})
改善案
私なら属性セレクタを使用出来る形式に変更して対応します。
https://triple-underscore.github.io/selectors4-ja.html#attribute-representation
HTML
1<ul class="list"> 2 <li><p class="region"><span data-tiiki="matudo chiba">松戸市</span></p></li> 3 <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li> 4 <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li> 5 <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li> 6 <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li> 7</ul> 8<script> 9jQuery('[data-tiiki~=chiba]'); 10</script>
Re: satoru225Simple さん
投稿2019/05/13 03:45
編集2019/05/13 03:48
総合スコア18162
こちらよ
「属性セレクタを使用出来る形式に変更して対応」
というのがよくわからないのですが、
どういうことでしょうか？
（知識がまだまだ追いついておらず、調べてもよく理解できませんでした。）
改善案にあるように、<span data-tiiki="matudo chiba"> とマークアップして、属性セレクタでマッチさせるという意味です。
(低評価理由が不明ですが、コードが動かなかったんですかね…。
出先で未検証だったので、後で確認します。)
問題なく動きますね。
https://codepen.io/anon/pen/pmErBv
返答が遅くなってしまい申し訳ありませんでした。
また、検証までしてくださり、ありがとうございました。
低評価に関してですが、他の方が押されたようで、
先ほど自分から＋１をしたところ、0になりました。
ありがとうございました！
0
こんにちは
とりあえず、ご質問に挙げられているコードを修正するならば、以下で、どうでしょう？ 修正対象は、該当しないリストアイテムの条件部分です。
修正前
javascript
1// 絞り込み対象でない場合は非表示 2if(lists.eq(j).find('.' + item).find('span').data('tiiki') !== target) { 3 lists.eq(j).hide(); 4}
修正後
javascript
1// 絞り込み対象でない場合は非表示 2const tiiki = lists.eq(j).find('.' + item).find('span').data('tiiki'); 3if(tiiki !== target && !tiiki.includes(target)) { 4 lists.eq(j).hide(); 5}
以下にて、修正後の動作を確認できます。
この修正によって、セレクターから「千葉市」を選んだときに、「松戸市」と「千葉市」の２つが表示されるようになります。
以上、参考になれば幸いです。
投稿2019/05/13 03:11
総合スコア9058
ありがとうございます！
このやり方だと、既存の単数と配列でもできるのですね。
動作も確認いたしました。
どういたしまして、解決されたようでよかったです。
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
ベストアンサー
配列なのでindexOf()などでチェックできませんか？
dataも全部配列にしたほうが扱いやすくなりますが。
html
1<ul class="list"> 2 <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 3 <li><p class="region"><span data-tiiki='["chiba"]'>千葉市</span></p></li> 4 <li><p class="region"><span data-tiiki='["katuura"]'>勝浦市</span></p></li> 5 <li><p class="region"><span data-tiiki='["abiko"]'>我孫子市</span></p></li> 6 <li><p class="region"><span data-tiiki='["kashiwa"]'>柏市</span></p></li> 7</ul>
js
1$(function() { 2 var lists = $('.list li'); 3 $(document).on('change', '.serchBox select', function() { 4 const select_val = $(this).val(); 5 lists.each(function(index, element){ 6 if(search($($(element).find('span').get(0)),select_val)){ 7 $(element).show(); 8 }else{ 9 $(element).hide(); 10 } 11 12 }); 13 }); 14 function search(elem,select){ 15 if (elem.data('tiiki').indexOf(select) >= 0){ 16 return true; 17 } 18 return false; 19 } 20});
投稿2019/05/13 03:07
総合スコア80850
ご返答くださり、ありがとうございます！
indexOf()と、他の方もご指摘してくださっている、
全て配列にするというやり方で、
うまくすることができました。
データの形式は全て同じにしておいたほうが問題が簡素化されます。
別の形式が混じる＝処理が増える＝不具合の混入リスクが高まる
ですので。
なるほどです。
今後違うことを実装する際もデータ形式を
一緒にすることを意識してみたいと思います。
0
data-tiikiを、一つの場合も配列にしてあげて、（data-tiiki="[chiba]"とか）判定分を以下にしてあげれば動くと思います。
javascript
1 if(lists.eq(j).find('.' + item).find('span').data('tiiki').indexOf(target) === -1) { 2 lists.eq(j).hide(); 3 }
投稿2019/05/13 02:56
退会済みユーザー
総合スコア0
ありがとうございます！
他の方も仰っているように、
全て配列にするやり方でやってみたいと思います！
また、わかりやすくコードの修正までしてくださり、
ありがとうございます！
0
単数と複数を同じカスタムデータで処理するのはどうかと思います
ひとつでも["chiba"]などにすれば処理しやすくなるでしょう
配列と文字列をチェック
javascript
1<script> 2$(function(){ 3 $('[name=region]').on('change',function(){ 4 var v=$(this).val(); 5 $('.region').closest('li').hide().filter(function(){ 6 var tiiki=$(this).find('[data-tiiki]').data('tiiki'); 7 return tiiki==v || $.inArray(v,tiiki)>=0; 8 }).show(); 9 }).trigger('change'); 10}); 11</script> 12<div id="page"> 13 <div class="serchBox"> 14 <select name="region"> 15 <option value="">地域を選択</option> 16 <option value="matudo">松戸市</option> 17 <option value="chiba">千葉市</option> 18 <option value="katuura">勝浦市</option> 19 <option value="abiko">我孫子市</option> 20 <option value="kashiwa">柏市</option> 21 </select> 22</div> 23 24<ul class="list"> 25 <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 26 <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li> 27 <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li> 28 <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li> 29 <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li> 30</ul> 31</div>
投稿2019/05/13 02:49
編集2019/05/13 03:08
総合スコア114812
一応、配列と文字列の両方をチェックする書き方を追記しておきます
ただし比較するものの型が違うのは致命的な欠陥につながる可能性もあるので
注意してください
ありがとうございます！
全てを複数にするという考え方はなかったです。
確かにその方が1つの処理で済むようなので
簡単なのと、欠陥を出さないためにも
よさそうですね。
あなたの回答
tips
プレビュー
