データ属性の値が一致した場合に表示させるには

###「option value」の値と、データ属性の値が一致したものを表示できるようにしたい。

現在、jsにて、絞り込みのギミックを作成しているのですが、
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index4.html
始めは上記のsampleのようにclass名に対して、
「option value」の値が一致した場合に表示するよう設定していたのですが、
これを「data-○○="値"」の値が一致した場合に表示するよう変更したいです。

発生している問題・エラーメッセージ

「data-○○="値"」の値がうまく取得されず、
絞り込みがうまく機能しない

特にエラーは出ていません。

該当のソースコード

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="okashiwa">柏市</option>
20		</select>
21		<button id="search">検索</button>
22    <button id="reset">リセット</button>
23	</div>
24
25	<ul class="list">
26		<li>
27
28			<p class="region"><span data-tiiki="matudo">松戸市</span></p>
29
30		</li>
31
32	</ul>
33</div>
34</body>
35</html>

js
1$(function() {
2	$(document).on('click', 'button', function() {
3		filter_list();
4	});
5
6	// リセットボタンをクリックしたときの処理
7	$('#reset').on('click', function() {
8		// フォームのselectとcheckboxをリセット
9		$('.serchBox select').val('');
10		// リストの絞り込みをリセット
11		filter_list();
12	});
13$('#search').on('click', function() {
14	filter_list();
15	});
16	// リストを絞り込む関数
17	function filter_list() {
18	var lists = $('.list li');
19
20		lists.show();
21		for (var i = 0; i < $('.serchBox select').length; i++) {
22			// 絞り込みの項目を取得
23			var item = $('.serchBox select').eq(i).attr('name');
24			// 絞り込みの対象を取得
25			var target = $('.serchBox select').eq(i).val();
26
27			if(target != '') {
28				for (var j = 0; j < lists.length; j++) {
29					// 絞り込み対象でない場合は非表示
30					if(!lists.eq(j).find('.' + item).find('span').data(tiiki)) {
31						lists.eq(j).hide();
32						}
33					};
34				}
35			};
36		}
37	});

試したこと

元々

js
1if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
2						lists.eq(j).hide();
3						}

となっていたところを

js
1if(!lists.eq(j).find('.' + item).find('span').data(tiiki)) {
2						lists.eq(j).hide();
3						}

に変えて、データ属性の値を取得しようとしたところ、
うまくいきませんでした。
特にエラー等も出ていないため、何が原因かわかっておりません。

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

回答2件

ベストアンサー

意図があってるかいまいち不安ですが、冗長にやるならこんな感じでしょうか？

HTML
1<div class="serchBox">
2  <select name="region">
3    <option value="">地域を選択</option>
4    <option value="matudo">松戸市</option>
5    <option value="chiba">千葉市</option>
6    <option value="katuura">勝浦市</option>
7    <option value="abiko">我孫子市</option>
8    <option value="okashiwa">柏市</option>
9  </select>
10  <button id="search">検索</button>
11  <button id="reset">リセット</button>
12</div>
13
14<ul class="list">
15  <li><p class="region"><span data-tiiki="matudo">松戸市</span></p></li>
16  <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li>
17  <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li>
18  <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li>
19  <li><p class="region"><span data-tiiki="okashiwa">柏市</span></p></li>
20</ul>

jQuery
1// 検索する処理
2$('#search').on('click', function() {
3  var selected = $('select[name="region"]').val();
4  $('.list').find('li').each(function(){
5    if ($(this).find('span').data('tiiki') === selected) {
6      $(this).show();
7    } else {
8      $(this).hide();
9    }
10  });
11});
12
13// リセットする処理
14$('#reset').on('click', function() {
15  $('.list').find('li').show();
16});
17

必要に応じて関数化するといいかもしれません

PS.柏市のvalue値が「okashiwa」なのが気になりますがｗ

投稿2019/05/10 07:18

編集2019/05/10 07:19

SakuBlade

総合スコア375

satoru225Simple

2019/05/10 07:28

こちら、回答くださり、ありがとうございます。実装したところ、うまくいくことができました！また、value値のご指摘ありがとうございます。確かにおかしいですねw

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

.data() - jQueryリファレンス

if(!lists.eq(j).find('.' + item).find('span').data(tiiki))

今回は.data(tiiki)の部分が誤りです。
tiikiという変数を使っているので<p data-matudo="true">...</p>というタグを想定していることになります。

これに気づくためには
実際にconsole.logで挟んで内容を確認してみてください。
該当のif文の直前の行でconsole.log(lists.eq(j).find('.' + item).find('span').data(tiiki))を差し込めば何を取得しているのかがデベロッパーツール上で追えますので、失敗したなーというのが2秒で理解出来ていたはずです。

実際のHTMLは<p data-tiiki="matudo">...</p>なので、
lists.eq(j).find('.' + item).find('span').data('tiiki')という風に文字列でdata属性の値を取りに行き、その結果をa === tiikiやa !== tiikiという比較演算子で比較すべきです。

投稿2019/05/10 07:02

編集2019/05/10 07:11

miyabi-sun

総合スコア21158

satoru225Simple

2019/05/10 07:22

ご回答ありがとうございます。確かに、console.logで何を取得しているか入れるべきでした。 1つ詳細に聞きたいのですが、「その結果をa === tiikiやa !== tiikiという比較演算子で比較すべきです。」とのことでしたので、今回の場合は、 if(target != '') {… の部分を if(target != 'tiiki') { にするという認識でよろしいでしょうか？度々申し訳ございません。お時間ありましたら、お知恵を貸していただけますと幸いです。

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

あなたの回答