前提・実現したいこと
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>
回答1件
あなたの回答
tips
プレビュー