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

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

ただいまの
回答率

88.92%

jQueryプラグイン"shuffle.js"を用いたAND検索の実装について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 141
退会済みユーザー

退会済みユーザー

jQueryプラグイン"shuffle.js"を用いたAND検索の実装について

記事を設定したラベルでフィルタリングするページを作成しています。
例えばラベルAとラベルB,両方の属性を持つを絞りたいといった感じです。
ラベルAだけといった単一のラベルを用いた絞り込みはできているのですが,2つ以上のラベルの実装で行き詰まっています

二つ目のボタンを押すとそれ以前に押したラベルのアクティブ状態がクリアされる

<script>
   $(function() {
       //ボタンが押されたときの処理
       $('#btn li').on('click', function() {
           var $this = $(this),
           $grid = $('#animationList');
           $('#btn .active').removeClass('active')
           $this.addClass('active');
           $grid.shuffle($this.data('group'));
       });
       $('#animationList').shuffle({
           group: 'all',
           speed: 700,
           easing: 'ease-in-out'
       });
   });
</script>

HTML

</head>
<body>
<div id="wrapper">
   <h1>Search Field</h1>
   <ul id="btn">
       <li data-group="health" name="health" id="health"># Health Care</li>
       <li data-group="learning" name="learning" id="learning"># Learning / Optimization</li>
       <li data-group="stim" name="stim" id="stim"># Electrical Stimulation</li>
   </ul>
   <ul id="btn">
       <li data-group="robot" name="robot" id="robot"># Robotics</li>
       <li data-group="vrar" name="vrar" id="vrar"># VR / AR</li>
       <li data-group="autonomous" name="autonomous" id="autonomous"># Autonomous Control</li>
   </ul>
   <ul id="btn">
       <li data-group="ah" name="ah" id="ah"># Human Augumentation</li>
       <li data-group="is" name="is" id="is"># Real Work Space</li>
       <li data-group="sc" name="sc" id="sc"># Smart Charging</li>
   </ul>
</br>
</br>
<h1>Our Research</h1>
</hr>
</br>
</br>
   <ul id="animationList" style="position: relative; transition: height 700ms ease-in-out 0s; height: 720px;">
       <li data-groups="[&quot;health&quot;,&quot;ah&quot;,&quot;stim&quot;,&quot;vrar&quot;]" class="filtered" data-x="0" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事A</span></li>
       <li data-groups="[&quot;learning&quot;,&quot;ah&quot;,&quot;stim&quot;,&quot;vrar&quot;]" class="filtered" data-x="240" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">Motionless</span></li>
       <li data-groups="[&quot;is&quot;,&quot;ah&quot;,&quot;vrar&quot;]" class="filtered" data-x="480" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(480px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事B</span></li>
       <li data-groups="[&quot;ah&quot;,&quot;vrar&quot;]" class="filtered" data-x="720" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(720px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事C</span></li>
       <li data-groups="[&quot;learning&quot;,&quot;health&quot;,&quot;ah&quot;,&quot;stim&quot;]" class="filtered" data-x="0" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事D</span></li>
       <li data-groups="[&quot;is&quot;,&quot;learning&quot;,&quot;health&quot;]" class="filtered" data-x="240" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事E</span></li>
       <li data-groups="[&quot;robot&quot;,&quot;is&quot;,&quot;learning&quot;]" class="filtered" data-x="480" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(480px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事F</span></li>
       <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;robot&quot;,&quot;is&quot;]" class="filtered" data-x="720" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(720px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事G</span></li>
       <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;learning&quot;]" class="filtered" data-x="0" data-y="480" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 480px, 0px) scale3d(1, 1, 1);"><span class="grey">記事H</span></li>
       <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;is&quot;]" class="filtered" data-x="240" data-y="480" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 480px, 0px) scale3d(1, 1, 1);"><span class="grey">記事I</span></li>
       </ul>
</div>
</body></html>

CSS

/* html5
---------------------------------------------------------------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display: block;
 margin: 0;
 padding: 0;
}
body {
   background-color: #f6f6f6;
}
#wrapper {
   width: 1360px;
   margin: 0 auto;
   color: #7d7d7d;
   padding-top: 30px;
   padding-bottom: 60px;
}
h1 {
   margin: 50px 0 70px;
}
.alpha {
   display: inline-block\9;
   zoom: 1;
   line-height: 1;
}
.alpha:hover {
   opacity: 0.9;
   filter: alpha(opacity=70);
}
.active {
   background-color: #EEEEEE;
   color:#ff8c00;
}
#btn {
   overflow: hidden;
   margin-top: 50px;
   margin-bottom: 40px;
   display: : inline-block;
   font-size: 22px;
   cursor: pointer;
}
#btn li {
   float: left;
   margin: 10px;
   cursor: pointer;
   border: solid;
   border-width: 2px;
   padding: 10px;
   box-shadow: 2px 2px 4px #808080;
}
#animationList {
   overflow: hidden;
}
#animationList li {
   width: 390px;
   height: 390px;
   padding: 10px;
   float: left;
   color: #fff;
}
#animationList li span {
   display: block;
   width: 360px;
   height: 340px;
   padding: 20px;
}
.box_image{
 height: 220px;
 overflow-x: hidden;
 overflow-y: hidden;
}
.red {
   background-color: #cf0000;
}
.blue {
   background-color: #0208da;
}
.green {
   background-color: #2baa08;
}
.yellow {
   background-color: #e8ec04;
}
.grey{
 background-color: #555555;
}
/* Reset
------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0;
}
address, em, strong, th {
 font-style: normal;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
th {
 text-align: left;
}
hr, legend {
 display: none;
}
h1, h2, h3, h4, h5, h6 {
 font-size: 100%;
}
img {
 border: 0;
 vertical-align: middle;
}
li {
 list-style-type: none;
}
/* Fonts
------------------------------------------------------------*/
body {
 font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Arial,Helvetica,Verdana,sans-serif;
 line-height: 1.5;
 color: #313131;
}
/* clearfix
------------------------------------------------------------*/
.clearfix:after {
 content: "";
 display: block;
 font-size: 0;
 visibility: hidden;
 height: 0;
 clear: both;
}
/* clearfix for IE7 */
.clearfix {
 display: inline-block;
}
.clearfix {
 display: block;
}

参考サイト

元のコードは以下のサイトから引っ張ってきました。
N - log.net

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kuma_kuma_

    2020/09/23 15:02

    うまくいかなかった原因が質問者様にないのに(JQueryのバグ)
    なぜ質問を消されたのですか?
    質問内容を消すのはルール違反になります。

    キャンセル

  • 退会済みユーザー

    2020/09/23 16:39

    複数のユーザーから「意図的に内容が抹消された質問」という意見がありました
    解決後に編集機能を用いて質問内容を改変し関係のない内容にしたり、内容を削除する行為は禁止しています。
    投稿していただいた質問は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。
    「質問を編集する」ボタンから編集を行い、他のユーザにも質問内容が見えるように修正してください。

回答 1

0

まずjqueryは3.3.1にバージョンアップして下さい
shuffleのカスタムフィルタ機能が正常に動作しません。
動かす前に
stylesheet
jquery.shuffle.min.js
URL指定の確認をして下さい。

今回の問題点
・タグにつけるId値は同じ名前を使わないで下さい。("btn"の事)
正常に動きません
・jqueryのバージョンにも注意してください。

今後この質問を見る方向けに詳細を記載します。

今回使っているshuffle.jsはバージョンが古いです。
その為ドキュメントが残っておらずshuffle.js自体の解析が必要でした。
フィルタ実行時($grid.shuffle)に判定用functonを指定すれば任意の条件で絞り込める事が
判ったんですが今度はjqueryが古い為、画像のliがはじめの1件を繰り返し送るという現象が起きました。
これはjqueryは3.3.1にバージョンアップで対応
あとは抽出条件の配列変数とdata-groupsの値でマッチ確認して
全てマッチしている場合Trueを返しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="jquery.shuffle.min.js"></script>
<script>

    var groupmap = {};    // ボタン押下状況

    $(function() {
        //ボタンが押されたときの処理
        $('.btn li').on('click', function() {

            var $this = $(this),
            $grid = $('#animationList');
            var group = $this.data('group');
            var groups = [];

            // ボタンのOnOff切り替え
            if(groupmap[group] == 'active'){
                $this.removeClass('active');
                groupmap[group] = 'deactivate';
            } else {
                $this.addClass('active');
                groupmap[group] = 'active';
            }

            // 選択されているボタン取得
            for(var key in groupmap){
                if(groupmap[key] == 'active') groups.push(key);
            }

            // フィルター処理
            $grid.shuffle(function filterEachItem(element, shuffle) {
                var cnt = 0;
                var dg = "";

                // data-groups取得
                for(var i = 0; i < element[0].attributes.length; i++){
                    if(element[0].attributes[i].localName == 'data-groups'){
                        dg = element[0].attributes[i].nodeValue;
                        break;
                    }
                }

                // data-groupsとの比較
                groups.forEach(function(elem, index) {
                    var reg = new RegExp('[\'\"]' + elem + '[\'\"]');
                    var result = dg.match(reg);
                    if(!result) cnt++;
                });
                return (cnt == groups.length);
            });
        });

        $('#animationList').shuffle({
            group: 'all',
            speed: 700,
            easing: 'ease-in-out'
        });
    });

</script>
</head>
<body>
<div id="wrapper">
    <h1>Search Field</h1>
    <ul class="btn">
        <li data-group="health" name="health" id="health"># Health Care</li>
        <li data-group="learning" name="learning" id="learning"># Learning / Optimization</li>
        <li data-group="stim" name="stim" id="stim"># Electrical Stimulation</li>
    </ul>
    <ul class="btn">
        <li data-group="robot" name="robot" id="robot"># Robotics</li>
        <li data-group="vrar" name="vrar" id="vrar"># VR / AR</li>
        <li data-group="autonomous" name="autonomous" id="autonomous"># Autonomous Control</li>
    </ul>
    <ul class="btn">
        <li data-group="ah" name="ah" id="ah"># Human Augumentation</li>
        <li data-group="is" name="is" id="is"># Real Work Space</li>
        <li data-group="sc" name="sc" id="sc"># Smart Charging</li>
    </ul>
 <br>
 <br>
 <h1>Our Research</h1>
 <br>
 <br>

    <ul id="animationList" style="position: relative; transition: height 700ms ease-in-out 0s; height: 720px;">
        <li data-groups="[&quot;health&quot;,&quot;ah&quot;,&quot;stim&quot;,&quot;vrar&quot;]" class="filtered" data-x="0" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事A</span></li>
        <li data-groups="[&quot;learning&quot;,&quot;ah&quot;,&quot;stim&quot;,&quot;vrar&quot;]" class="filtered" data-x="240" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">Motionless</span></li>
        <li data-groups="[&quot;is&quot;,&quot;ah&quot;,&quot;vrar&quot;]" class="filtered" data-x="480" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(480px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事B</span></li>
        <li data-groups="[&quot;ah&quot;,&quot;vrar&quot;]" class="filtered" data-x="720" data-y="0" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(720px, 0px, 0px) scale3d(1, 1, 1);"><span class="grey">記事C</span></li>
        <li data-groups="[&quot;learning&quot;,&quot;health&quot;,&quot;ah&quot;,&quot;stim&quot;]" class="filtered" data-x="0" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事D</span></li>
        <li data-groups="[&quot;is&quot;,&quot;learning&quot;,&quot;health&quot;]" class="filtered" data-x="240" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事E</span></li>
        <li data-groups="[&quot;robot&quot;,&quot;is&quot;,&quot;learning&quot;]" class="filtered" data-x="480" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(480px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事F</span></li>
        <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;robot&quot;,&quot;is&quot;]" class="filtered" data-x="720" data-y="240" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(720px, 240px, 0px) scale3d(1, 1, 1);"><span class="grey">記事G</span></li>
        <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;learning&quot;]" class="filtered" data-x="0" data-y="480" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(0px, 480px, 0px) scale3d(1, 1, 1);"><span class="grey">記事H</span></li>
        <li data-groups="[&quot;sc&quot;,&quot;autonomous&quot;,&quot;is&quot;]" class="filtered" data-x="240" data-y="480" style="position: absolute; top: 0px; left: 0px; opacity: 1; transition: transform 700ms ease-in-out 0s, opacity 700ms ease-in-out 0s; margin-top: 0px; margin-right: 0px; transform: translate3d(240px, 480px, 0px) scale3d(1, 1, 1);"><span class="grey">記事I</span></li>
    </ul>
</div>
</body>
</html>

btnをID指定からClass指定に変更

/* html5
---------------------------------------------------------------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

body {
    background-color: #f6f6f6;
}

#wrapper {
    width: 1360px;
    margin: 0 auto;
    color: #7d7d7d;
    padding-top: 30px;
    padding-bottom: 60px;
}

h1 {
    margin: 50px 0 70px;
}

.alpha {
    display: inline-block\9;
    zoom: 1;
    line-height: 1;
}

.alpha:hover {
    opacity: 0.9;
    filter: alpha(opacity=70);
}

.active {
    background-color: #EEEEEE;
    color:#ff8c00;
}
/* btnをID指定からClass指定に変更 */
.btn {
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 40px;
    display: : inline-block;
    font-size: 22px;
    cursor: pointer;

}

.btn li {
    float: left;
    margin: 10px;
    cursor: pointer;
    border: solid;
    border-width: 2px;
    padding: 10px;
    box-shadow: 2px 2px 4px #808080;
}

#animationList {
    overflow: hidden;
}

#animationList li {
    width: 390px;
    height: 390px;
    padding: 10px;
    float: left;
    color: #fff;
}

#animationList li span {
    display: block;
    width: 360px;
    height: 340px;
    padding: 20px;
}

.box_image{
  height: 220px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.red {
    background-color: #cf0000;
}

.blue {
    background-color: #0208da;
}

.green {
    background-color: #2baa08;
}

.yellow {
    background-color: #e8ec04;
}

.grey{
  background-color: #555555;
}
/* Reset
------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

address, em, strong, th {
  font-style: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
}

hr, legend {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

img {
  border: 0;
  vertical-align: middle;
}

li {
  list-style-type: none;
}

/* Fonts
------------------------------------------------------------*/
body {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Arial,Helvetica,Verdana,sans-serif;
  line-height: 1.5;
  color: #313131;
}

/* clearfix
------------------------------------------------------------*/
.clearfix:after {
  content: "";
  display: block;
  font-size: 0;
  visibility: hidden;
  height: 0;
  clear: both;
}

/* clearfix for IE7 */
.clearfix {
  display: inline-block;
}

.clearfix {
  display: block;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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