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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

790閲覧

JavaScriptを使った絞込検索の項目を増やしたい

tom88

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/10 06:35

編集2018/09/10 15:20

前提・実現したいこと

http://www.designdrill.jp/jquery/08/01_load_01.html

このサイトのような方式で、
「○○を選択してください」の項目をあと3つ増やしたいと思っております。

現在、このページを利用して、絞込検索ができるサイトを作っています。
「○○を選択してください」の項目をあと3つ増やそうと作っているのですが、
検索を押しても追加した項目で絞り込みを行いません。

項目を3つ追加して、5個の項目の絞込検索を作りたいのです。

以下のような5項目での検索を行うようにしたいのです。

色を選択してください
赤 青 緑 黄

形を選択してください
四角 丸 三角

重さを選択してください
100g 200g 300g

素材を選択してください
木 鉄 アルミ

価格を選択してください
500円 1,000円 2,000円

発生している問題

追加したい下記項目のチェックボタンを押しても、
絞込ができない。

・重さ
・素材
・価格

試したこと

重さ weight
素材 material
価格 price

として、下記のように項目を増やして書き換えました。

//---表示リセット以下の部分をどのように書き換えれば良いのかが分かりません。

ご教授ください。

何卒、よろしくお願いいたします。


javascript

1<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> 2 <script type="text/javascript"> 3 4 5 6 dataArray = [];//csvを配列化したものを格納 7 8 $(function(){ 9 10 //---データの読込 11 $.get('data.csv', analyzeFunc); 12 13 //---データを配列に変換 14 function analyzeFunc(data) { 15 var rowArray = data.split("\r\n"); 16 for (var i in rowArray) {dataArray[i] = rowArray[i].split(",")} 17 } 18 19 20 //---検索がクリックされたらラジオボタンの状態を取得して検索開始 21 $("#serch").click(function(){ 22 var myColor = $("input[name='color']:checked").val(); 23 var myShape = $("input[name='shape']:checked").val(); 24 var myWeight = $("input[name='weight']:checked").val(); 25var myMaterrial = $("input[name='material']:checked").val(); 26var myPrice = $("input[name='price']:checked").val(); 27 var ansArray = dataSerch(myColor, myShape, myWeight, myMaterial, myPrice); 28 var cardHTML = dispFunc(ansArray); 29 $("#dispArea").html(cardHTML); 30 }); 31 //---表示リセット 32 $("#reset").click(function(){ 33 $("#dispArea").html(""); 34 }); 35 36 37 38 function dataSerch(myColor, myShape) { 39 var ansArray = [];//---結果保存用配列 40 for (var i in dataArray) { 41 var lineData = dataArray[i] 42 if (lineData[0] == myColor && lineData[1] == myShape) { 43 var productArray = [lineData[2], lineData[3], lineData[4]]; 44 ansArray.push(productArray); 45 } 46 } 47 return ansArray; 48 } 49 50 51 //---該当商品だけのカード作成を依頼 52 function dispFunc(ansArray) { 53 var str = ""; 54 for (var i in ansArray) { 55 var myData = ansArray[i]; 56 str += makeCardFunc(myData); 57 } 58 return str; 59 } 60 //---商品カードのhtmlを作成 61 function makeCardFunc(myData) { 62 var str = '<div class="card"><img class="float" src="../images/search/' + myData[0] + 63 '" /><h3>' + myData[1] + '</h3><p>' + myData[2] + "</p></div>"; 64 return str; 65 } 66 67 68 69 70 }); 71 </script>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/09/10 07:22

[Java]と[JavaScript]は全く別物です。混合されないように気をつけてください。また、プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
tom88

2018/09/10 15:22

アドバイスありがとうございます。修正をさせていただきました。不慣れで申し訳ございません。
guest

回答1

0

ベストアンサー

html 側のタグにはキチンと適切なname 属性が設定されているという前提でお答えします。

見たところ、質問者さまはdataSearch 関数を書き換える必要があると思います。

具体的には、

  1. 引数にmyWeight 等を受け取るようにする
  2. 条件分岐の部分で myWeight 等の照合を追加する

の2点の修正が必要です。

入力となる data.csv の3~5列目に重量等の情報を追加したとすると、おそらく以下のような修正コードになります。

JavaScript

1// 引数を追加 2function dataSearch(myColor, myShape, myWeight, myMaterial, myPrice){ 3 var ansArray = []; 4 for(var i in dataArray){ 5 var lineData = dataArray[i]; 6 // 条件を追加 7 if( 8 lineData[0] == myColor && 9 lineData[1] == myShape && 10 lineData[2] == myWeight&& 11 lineData[3] == myMaterial && 12 lineData[4] == myPrice 13 ){ 14 // ずれたであろう、本体データの列番号を修正 15 var productArray = [lineData[5], lineData[6], lineData[7]]; 16 ansArray.push(productArray); 17 } 18 } 19 return ansArray; 20}

ちなみに、「探す」という意味の英語のスペルは、 'search' であることを補足させていただきます。

また、そのインデントや空行の取り方がぐちゃぐちゃのコードを見て何も感じない感性はプログラム書きとして致命的だと思うので、矯正なさることをお勧めいたします。

投稿2018/09/10 15:43

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tom88

2018/09/10 17:13

解決いたしました。 初心者の質問に丁寧にお答えいただき、ありがとうございます。 感謝いたしております。 もう、1点、お聞きしても宜しいでしょうか。 「検索」を押した後に、該当する項目が無かった場合、 「該当項目なし」と表示させたいと思っております。 ご教授の程よろしくお願い致します。
R.Mizukami

2018/09/10 21:41

別枠で質問なさった方がいいと思いますが、dispFunc のところで結果のHTMLを生成しているので、この中でansArray が空の場合は'該当項目なし' という内容のHTML を返すようにすればよいと思います。
tom88

2018/09/10 21:50

ご丁寧にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問