Q&A
具体的にHTMLおよびJavaScriptを質問文に追記されたほうが回答を得られやすいと思います。
ーー希望ーーー
絞り込み機能のあるサイト（こちら）を作っています。
検索で変動するデータは、現在ブロック表示です。
これをこの画像のようにリスト表示にしたいです。
※検索する前、後、どちらもリストの状態。検索すると該当データのみが残り、リストの行数が減る。
ーー状況ーーー
このサイトは一から作ったわけではないので、
cssファイルをいじればよいのか？jsファイルをいじればよいのかわからない状態です。
script.jsファイルの
/=====
HTML出力
======/
とかいてある部分が怪しい。ということまでは調べていきつきましたがそこから先、
どういじればよいのか分かりません。
アドバイスお願いします。
ーー参考資料ーーー
htmlファイル
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>絞り込み検索サンプル</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="filterArea"> <h1>絞り込み検索 条件設定</h1> <div class="filter_life"> <h2>平均寿命</h2> <select name="life"> <option value="">指定なし</option> <option value="1">～1</option> <option value="2">2～20</option> <option value="3">31～50</option> <option value="4">51～</option> </select> </div> <div class="filter_tag"> <h2>属性</h2> <input type="checkbox" name="tag" value="哺乳類" id="chk01"><label for="chk01">哺乳類</label> <input type="checkbox" name="tag" value="鳥類" id="chk02"><label for="chk02">鳥類</label> <input type="checkbox" name="tag" value="魚類" id="chk03"><label for="chk03">魚類</label> <input type="checkbox" name="tag" value="昆虫類" id="chk04"><label for="chk04">昆虫類</label> <input type="checkbox" name="tag" value="かわいい" id="chk05"><label for="chk05">かわいい</label> <input type="checkbox" name="tag" value="かっこいい" id="chk06"><label for="chk06">かっこいい</label> <input type="checkbox" name="tag" value="ほのぼの" id="chk07"><label for="chk07">ほのぼの</label> <input type="checkbox" name="tag" value="こわい" id="chk08"><label for="chk08">こわい</label> <input type="checkbox" name="tag" value="うごかない" id="chk09"><label for="chk09">うごかない</label> <input type="checkbox" name="tag" value="だれなん？" id="chk10"><label for="chk10">だれなん？</label> </div> <div class="filter_keyword"> <h2>キーワード</h2> <input type="text" name="filter_free" size="40" /> <button type='button' name='free_submit'>検索</button> </div> <!--/.filterArea--></div> <div class="resultArea"> <div class="productCntArea"></div> <div class="productArea"></div> <!--/.resultArea--></div> <script src="js/jquery.min.js"></script> <script src="js/underscore-min.js"></script> <script src="js/script.js"></script> </body> </html>
jsファイル
$(function() { /*================================================================ 情報 ================================================================*/ var allList = [ { id: "id001", life: 14, title: "猫", tag: ["哺乳類","かわいい","かっこいい"], description: "猫様は何をしても許されます。猫様にあやかりましょう。目指せ閲覧数アップ。" }, { id: "id002", life: 36, title: "ハシビロコウ", tag: ["鳥類","かっこいい","こわい","うごかない"], description: "（以下Wikipediaより）ペリカン目ハシビロコウ科の鳥類の一種である。 本種のみでハシビロコウ科を形成する（1属1種）。" }, { id: "id003", life: 50, title: "ハタ（お魚）", tag: ["魚類","ほのぼの"], description: "（以下Wikipediaより）スズキ目ハタ科ハタ亜科 Epinephelinae に属する魚の総称。ハタ亜科はマハタ亜科とよぶ場合もある。" }, { id: "id004", life: 50, title: "ダチョウ", tag: ["鳥類","かっこいい","こわい"], description: "（以下Wikipediaより）ダチョウ目ダチョウ科ダチョウ属に分類される鳥。鳥でありながら飛ぶことは出来ず、平胸類に分類される（飛べない鳥も参照）。" }, { id: "id005", life: 0.5, title: "カマキリ", tag: ["昆虫類","かっこいい","こわい"], description: "（以下Wikipediaより）昆虫綱カマキリ目（蟷螂目、学名：Mantodea）に分類される昆虫の総称。前脚が鎌状に変化し、他の小動物を捕食する肉食性の昆虫である。" }, { id: "id006", life: 80, title: "おじさん", tag: ["哺乳類","だれなん？"], description: "だれ！？" }, { id: "id007", life: 10, title: "リス", tag: ["哺乳類","かわいい","ほのぼの"], description: "（以下Wikipediaより）ネズミ目(齧歯目)リス科に属する動物の総称である。" }, { id: "id008", life: 20, title: "フクロウ", tag: ["鳥類","こわい"], description: "（以下Wikipediaより）フクロウ目フクロウ科フクロウ属に分類される猛禽類である鳥類の一種。" } ]; /*================================================================ スクリプトはじまり ================================================================*/ function init() { //イベント登録 $(".filter_life select").on("change", onFilterChange); $(".filter_tag input").on("change", onFilterChange); $(".filter_keyword button").on("click", onFilterChange); //最初は全て出力 refleshHtml(allList); } /*================================================================ HTML出力 ================================================================*/ function refleshHtml(list) { var outputHtml = ''; //出力する内容をoutputHtmlに格納 if (list.length > 0) { _.each(list, function(line, i) { outputHtml += '<div class="product">'; outputHtml += ' <div class="photo"><img src="images/' + line.id + '.jpg" alt="' + line.title + '" /></div>'; outputHtml += ' <div class="info">'; outputHtml += ' <h3 class="productTitle">' + line.title + '</h3>'; outputHtml += ' <p class="productLife">平均寿命（推定）: ' + line.life + '年</p>'; outputHtml += ' <ul class="tag">'; _.each(line.tag, function(tag, i){ outputHtml += ' <li>' + tag + '</li>'; }); outputHtml += ' </ul>'; outputHtml += ' <p class="description">' + line.description + '</p>'; outputHtml += ' </div>'; outputHtml += '<!--/.product--></div>'; }); } else { outputHtml += '<div class="noproduct"><p>条件に当てはまる商品が見つかりません。</p></div>'; } //HTML出力（フェードインアニメーションつき） $('.productArea').html(outputHtml); $('.productArea .product').css({opacity: 0}).each(function(i){$(this).delay(100 * i).animate({opacity:1}, 300); }); //検索件数表示 $('.productCntArea').html('<p>' + allList.length + '件中 ' + list.length + '件</p>'); } /*================================================================ 絞り込み条件を変更した時 ================================================================*/ function onFilterChange(e) { var filterFncs = []; var result = []; //セレクトボックスの値を引数に指定した関数filterByLifeをfilterFuncs配列に格納 filterFncs.push( function(list) { return filterByLife(list, $('.filter_life select').val()); } ); //チェックボックスの値を引数に指定した関数filterByTagをfilterFuncs配列に格納 filterFncs.push( function(list) { return filterByTag(list, $('.filter_tag input:checked')); } ); //キーワードの値を引数に指定した関数filterByKeywordをfilterFuncs配列に格納 filterFncs.push( function(list) { return filterByKeyword(list, _.escape($('.filter_keyword input').val())); } ); //FilterFuncs配列内の関数をバケツリレーみたいに1つずつ実行して結果をresult配列に格納 result = _.reduce(filterFncs, function(list, fnc) { return fnc(list); }, allList); //絞り込んだ結果を出力 refleshHtml(result); } /*================================================================ 絞り込み[1] セレクトボックス絞り込み関数 ================================================================*/ function filterByLife(list, value) { //絞り込み指定がない場合はリターン if (value == "") { return list; } //選択したセレクトボックスとlifeがマッチするかでフィルタリング return _.filter(list, function(item) { switch (value) { case '1': return item.life <= 1; case '2': return 1 < item.life && item.life <= 20; case '3': return 20 < item.life && item.life <= 50; case '4': return 50 < item.life; } }); } /*================================================================ 絞り込み[2] チェックボックス絞り込み関数 ================================================================*/ function filterByTag(list, value) { //絞り込み指定がない場合はリターン if (value.length == 0) { return list; } //選択した属性（チェックボックス）とtagがマッチするかでフィルタリング return _.filter(list, function(item) { var isMatch = false; //配列同士の比較 _.each(value, function(chkItem, i) { _.each(item.tag, function(tagItem, i) { if (tagItem === $(chkItem).val()) { isMatch = true; } }); }); return isMatch; }); } /*================================================================ 絞り込み[3] テキストボックス絞り込み関数 ================================================================*/ function filterByKeyword(list, value) { //絞り込み指定がない場合はリターン if (value == "") { return list; } //検索キーワードを配列に格納（スペースがある場合は複数格納） var freeAry = []; var val = value.replace(/ /g, " "); searchAry = val.split(" "); //入力したキーワードがtitleもしくdescriptionにマッチするかでフィルタリング return _.filter(list, function(item) { var isMatch = false; _.each(searchAry, function(data, i) { if (item.title.indexOf(data) != -1 || item.description.indexOf(data) != -1) { isMatch = true; } }); return isMatch; }); } /*================================================================ スクリプトはじめ ================================================================*/ init(); });
その他、underscore-min.jsというファイルもあります。
アドバイスに必要なファイルがあればおっしゃってください。
回答1件
0
ベストアンサー
refleshHtml関数は、配列を受け取ってリストを出力するための関数です。
あなたなら何を絞り込む？絞り込み検索に挑戦しよう！ | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 （東京・千代田区）
とのこと。その関数のoutputHtml +=と書いてある部分をテーブルに変更すればいいと思いますよ！
投稿2017/05/06 10:02
総合スコア36074
ご回答ありがとうございます。
「テーブルに変更する」と指示され、パッと思いつくのは
「outputHtml += 辺りのコードを、HTMLのtableタグのようなものを使って、
テーブルになるように整理する。」という作業です。
そういう作業ということで合っていますか？
その場合、それはどうやればよいのでしょうか？
※こちらのサイトのように、テーブルになる値(なまえ、寿命など)がＨＴＭＬファイルに書いてあれば
テーブルを作る作業もわかるのですが、今回はjsファイルに値が書いてあるのでどういう作業をやるべきかわかりません・・。
「こちらのサイトのように」→http://www.webopixel.net/javascript/444.html
もしかして、質問者はjavascriptが全く分からないのでしょうか？
そうであるならば、javascriptが全く分からない人がjavascriptを書くのは難しいことをご理解ください。まずjavascriptを勉強するか、あるいは業者さんなどに発注をして誰かに作ってもらう方がいいでしょう。
もし、多少はjavascriptが分かるということであれば、具体的に何が分からないのかコメントしていただければ、お手伝いできるかもしれません。
javascriptが全く分からない人がjavascriptを書くのは難しいことをご理解ください
↓
確かにそうですね。急ぎでしたので、とある方に頼んで作ってもらいました。
アドバイスありがとうございます。
あなたの回答
tips
プレビュー
