deta属性値を複数指定してJavaScriptで認識させるには

deta属性値を複数指定して、『Muuri.js』のフィルターを機能させたいです

フィルタ・ソート・検索機能対応のグリッドレイアウトJavascriptプラグイン**『Muuri.js』**を使ってWEBページを作成しています。

１つのアイテムにdeta属性値を複数指定して、フィルターを機能させたいのですが、deta属性値が1つのアイテムしか機能せず、複数指定のものは全表示でしか表示されません。

基本スクリプトはmuuri.jsに、フィルタ機能などについては下記リンクを参考に、muuri_filtering.jsに記述しています。
(最終的にフィルタ機能のみを実装し、検索・ソート機能は非表示にする予定です。)

jqueryは少し学んだのですが、javascriptはあまり分からず、どこを触っていいのか分からない状態です。
どなたか分かる方、ご教示いただけないでしょうか。

▼ Muuri公式ページ
https://muuri.dev

▼ Muuriのgithubページ
https://github.com/haltu/muuri#getting-started

▼ Muuriのgithub.comの日本語翻訳ページ
https://tr.you84815.space/muuri/

▼ 参考にしたページ
https://digipress.info/module-library/grid-layout-js-plugin-muuri/

発生している問題・試したこと

deta属性値が1つのアイテムはフィルターが正常に機能するが、複数指定のものは全表示状態でしか表示されない。
（エラーメッセージは出ていません）

data-tag="web graphic logo"
data-tag="web,graphic,logo"
data-tag='["web","graphic","logo"]
data-tag='["web":"graphic":"logo"]'
data-tag='{"web","graphic","logo"}'
data-tag='{"web":"graphic":"logo"}'
htmlのdeta要素に上記を試しましたがどれも同じ状態になりました。
＿

javascript
1  isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;

過去の質問を見て、上記の厳密等価演算子===あたりが原因かなと思ったのですが、修正の仕方が分かりませんでした。
よろしくお願いします。

該当のソースコード

HTML
1<body>
2 <header></header>
3 <main>
4
5  <!-- .grid-wrapper -->
6  <section class="grid-wrapper">
7  　<!-- .filter-controls -->
8　  <div class="filter-controls">
9     <!-- .control Search -->
10     <div class="control">Search
11      <input class="search-field form-control" type="text" name="search" placeholder="Enter the fruit name">
12     </div>
13     <!-- .control Filter  -->
14  　　<div class="control">Filter
15      <select class="filter-field form-control">
16　　　　<option value="">all</option>
17　　　　<option value="web">web</option>
18　　　　<option value="project">project</option>
19　　　　<option value="logo">logo</option>
20　　　　<option value="namecard">namecard</option>
21　　　　<option value="illustration">illustration</option>
22　　　　<option value="collage">collage</option>
23　　　　<option value="graphic">graphic</option>
24　　　　<option value="basic">basic</option>
25　　　　<option value="other">other</option>
26      </select>
27     </div>
28     <!-- .control Sort -->
29     <div class="control">Sort
30      <select class="sort-field form-control">
31       <option value="order">None</option>
32       <option value="title">Order by fruit name</option>
33       <option value=tag>Order by tag name</option>
34      </select>
35     </div>
36　　 </div>
37　　 <!-- /.filter-controls -->
38
39　　 <!-- .grid / コンテナ -->
40 　　<div class="grid">
41
42　　　<!-- #A.item :フィルタが機能して表示される -->
43　　　<div id="A" class="item" data-tag="logo">
44      <div class="item-content">
45　　　　<a href="#">
46　　　　 <img src="#">
47　　　　</a>
48　　　 </div>
49　　  </div>
50
51     <!-- #B.item :フィルタが機能せず、全表示時のみ表示される -->
52     <div id="B" class="item" data-tag="web graphic logo">
53      <div class="item-content">
54       <a href="#">
55        <img src="#">
56       </a>
57      </div>
58     </div>
59<!-- 他.item省略  -->
60
61    </div><!-- / .grid / コンテナ -->
62   </section>
63  </main>
64  <footer></footer>
65  <!-- js -->
66  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
67  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
68  <script src="js/muuri.min.js"></script>
69  <script src="js/muuri_filtering.js"></script>
70 </body>

javascript
1// muuri_filtering.js
2
3document.addEventListener('DOMContentLoaded', function () {
4  var grid = null,
5      wrapper = document.querySelector('.grid-wrapper'),
6      searchField = wrapper.querySelector('.search-field'),
7      filterField = wrapper.querySelector('.filter-field'),
8      sortField = wrapper.querySelector('.sort-field'),
9      gridElem = wrapper.querySelector('.grid'),
10      searchAttr = 'data-title',
11      filterAttr = 'data-tag',
12      searchFieldValue,
13      filterFieldValue,
14      sortFieldValue,
15      dragOrder = [];
16
17  // Init the grid layout  //グリッドレイアウトを初期化する
18  grid = new Muuri(gridElem, {
19    dragEnabled: true
20  });
21  
22  // Set inital search query, active filter, active sort value and active layout.
23  // 初期検索クエリ、アクティブフィルター、アクティブソート値、アクティブレイアウトを設定する
24  searchFieldValue = searchField.value.toLowerCase();
25  filterFieldValue = filterField.value;  // select optionのvalue
26  sortFieldValue = sortField.value;
27
28  // Search field event binding
29  // 検索フィールドのイベントバインディング
30  searchField.addEventListener('keyup', function () {
31    var newSearch = searchField.value.toLowerCase();
32    if (searchFieldValue !== newSearch) {
33      searchFieldValue = newSearch;
34      filter();
35    }
36  });
37
38  // Filter field event binding
39  // フィルターフィールドイベントバインディング
40  filterField.addEventListener('change', filter);
41  
42  // Sort field event binding
43  // 並べ替えフィールドイベントバインディング
44  sortField.addEventListener('change', sort);
45
46  // Filtering  //フィルタリング
47  function filter() {
48    filterFieldValue = filterField.value; // select optionのvalue
49    grid.filter(function (item) {
50      var element = item.getElement(),
51          isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
52          isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
53      return isSearchMatch && isFilterMatch;
54    });
55  }
56  
57  // Sorting  // 仕分け
58  function sort() {
59    // Do nothing if sort value did not change.
60    // ソート値が変更されなかった場合は何もしない
61    var currentSort = sortField.value;
62    if (sortFieldValue === currentSort) {
63      return;
64    }
65
66    // If we are changing from "order" sorting to something else
67    // let's store the drag order.
68    // 「順序」ソートから別のものに変更する場合は、ドラッグ順序を保存しましょう。
69    if (sortFieldValue === 'order') {
70      dragOrder = grid.getItems();
71    }
72
73    // Sort the items.  // アイテムを並べ替える
74    grid.sort(
75      currentSort === 'title' ? compareItemTitle :
76      currentSort === 'tag' ? compareItem :
77      dragOrder
78    );
79    sortFieldValue = currentSort;
80  }
81  
82  // Compare data-title  // データタイトルを比較する
83  function compareItemTitle(a, b) {
84    var aVal = a.getElement().getAttribute(searchAttr) || '';
85    var bVal = b.getElement().getAttribute(searchAttr) || '';
86    return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
87
88  }
89
90  // Compare data-tag  // データタグを比較する
91  function compareItemTag(a, b) {
92    var aVal = a.getElement().getAttribute(filterAttr) || '';
93    var bVal = b.getElement().getAttribute(filterAttr) || '';
94    return aVal < bVal ? -1 : aVal > bVal ? 1 : compareItemTitle(a, b);
95  }
96});
97

m.ts10806

2020/09/02 00:44

「Java」は本件とはどのように関係するのでしょうか

_beats_

2020/09/02 08:46

JavaScriptの略称タグと勘違いしておりました！紛らわしくなり申し訳ありません…！Javaタグは削除いたしました。

m.ts10806

2020/09/02 12:02

この手の単語には下手な解釈を生まないために「略称」は使われないかと思います。

_beats_

2020/09/02 12:20

なるほど！またひとつ勉強になりました！ありがとうございます。

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

回答1件

ベストアンサー

こんにちは。

試していませんが、

js
1isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '').indexOf(filterFieldValue) != -1;

という感じですといかがでしょうか。

投稿2020/09/03 04:36

Lhankor_Mhy

総合スコア36960

_beats_

2020/09/03 17:50 編集

Lhankor_Mhyさん、回答ありがとうございます。試してみたところ、複数指定でも機能するようになりました！本当に助かりました…！ありがとうございます！ --------------------------------------------------------------------------------------- isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue; --------------------------------------------------------------------------------------- 上記を以下に修正 --------------------------------------------------------------------------------------- isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '').indexOf(filterFieldValue) != -1; --------------------------------------------------------------------------------------- 修正していただいた記述の意味を調べて考えてみたのですが、 --------------------------------------------------------------------------------------- isFilterMatch = !filterFieldValue ? // 条件：(フィルターフィールドのvalue)以外でフィルター(タグの値)にマッチするもの true // 真：あれば true を返す : (element.getAttribute(filterAttr) || '').indexOf(filterFieldValue) // それ以外：{取得された.itemの'deta-tag'値または ''(空)}から(選択されたoptionのvalue値)を文字列検索し、マッチした.itemはtrue != -1 // 否：なければ-1を返す --------------------------------------------------------------------------------------- という解釈で合っているでしょうか？