Q&A
「CSS」「SCSS」は本件とは直接関係はなさそうに見受けられますので、タグは外しておいても良いかもしれません。
前提・実現したいこと
checkboxのinputタグがチェックされたらそれのvalueを取得してcandyArrayの配列の中にある値を同じproductIDを
持つものを表示したいです。
使っているツール
HTML,CSS, jquery,sass,Ajax
発生している問題
現在、実装方法がわからず悩んでいます。 valueの設定や、checkboxの実装は完了しているのですが、肝心のコードがわかりません。 おしえてください。おねがいいたします。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>Portfolio</title> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 9 <link rel="stylesheet" href="./dist/css/app.css"> 10 </head> 11<body> 12 </div> 13 <div class="products block"> 14 <h2 class="section-header"> 15 <span>ぼくの製品</span> 16 </h2> 17 <form class="refine-search-form fs-18"> 18 <input type="hidden" name="mode" value="json" class="target"> 19 <input type="hidden" name="disp_number" value="1000" class="target"> 20 <input type="checkbox" value="candy" class="target"> 21 <label for="category_id34">インフルブロックのど飴</label> 22 <input type="checkbox" value="pastry" class="target"> 23 <label for="category_id32">菓子</label> 24 <input type="checkbox" value="juice" class="target"> 25 <label for="category_id31">ジュース・飲料</label> 26 <input type="checkbox" value="seasoning" class="target"> 27 <label for="category_id30">調味料</label> 28 <input type="checkbox" value="vegetables" class="target"> 29 <label for="category_id29">野菜・果物</label> 30 <input type="checkbox" value="fish" class="target"> 31 <label for="category_id28">鮮魚・海産物</label> 32 <input type="checkbox" value="meat" class="target"> 33 <label for="category_id27">牛肉・豚肉・鶏肉他</label> 34 <input type="checkbox" value="food" class="target"> 35 <label for="category_id8">食品</label> 36 <input type="checkbox" value="otherwise" class="target"> 37 <label for="category_id33">その他</label> 38 </form> 39 <div class="block-body"> 40 <ul class="refine-seach list"> 41 </ul> 42 </div> 43 </div> 44 45 <script> 46 src="https://code.jquery.com/jquery-3.3.1.min.js" 47 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 48 crossorigin="anonymous"></script> 49 <script> 50 51 $(function() { 52 $('.menu_botton').on('click', function() { 53 var manu = $('.nav_manu'); 54 manu.toggle('slow'); 55 }); 56<//実装したい点 57 var candyArray = [10,11,275,221,283]; 58 var meatArray = [14,12,15,169,170,13,16,17,167,168]; 59 60 $('input').change(function() { 61 $('refine-seach').empty(); 62 // console.log( $(this).val() ); 63 var hoge = $('input').val(); 64 // console.log(hoge); 65 66 if(hoge == 'candy') { 67 68 69 } else if(hoge == 'meat') { 70 71 } 72 73 }) 74 75<//終わり 76 function getProductsList() { 77 $.ajax({ 78 url: './service.json', 79 method: 'get' 80 }) 81 .then(shapingData); 82 } 83 84 function shapingData(data) { 85 // console.log('data => ', data); 86 // console.log('data.products => ', data.products); 87 data.products.forEach(function(item) { 88 // console.log('item => ', item); 89 // console.log(item.papc2.value); 90 91 var template = 92 '<li class="drops">' + 93 '<a href="' + '" >' + 94 '<img src="https://milmeal.com/upload/save_image/' + item.main_list_image + '" class="product-image">' + 95 '<div class="make">' + 96 '<div class="fs-12">' + item.name + item.papc4.value + item.papc5.value +'</div>' + 97 '<div class="fc-red fs-14 text-right"> 販売価格(税込)' + item.price02_min_inctax + '円' + '</div>' + 98 '</div>' + 99 '</a>' + 100 '</li>'; 101 102 $('.refine-seach').prepend(template); 103 }); 104 105 }; 106 107 getProductsList(); 108 109 110 }); 111 </script> 112 113</body> 114</html>
###” products”の三行目が呼び出してきているIDです。
survice.json
1{ 2 "products": [ 3 { 4 "product_id": "11", 5 "product_code_min": "inf02", 6 "product_code_max": "inf02", 7 "name": "インフルブロックのどあめ ブルーベリー味", 8 "comment1": null, 9 "comment2": null, 10 "comment3": null, 11 "main_list_comment": "<燕の巣を使った奇跡のキャンディ>", 12 "main_image": "11020721_56369067217cb.jpg", 13 "main_list_image": "11020721_563690672a095.jpg", 14 "main_large_image": "11020721_56369067196de.jpg", 15 "price01_min": null, 16 "price01_max": null, 17 "price02_min": "2500", 18 "price02_max": "2500", 19 "stock_min": null, 20 "stock_max": null, 21 "stock_unlimited_min": "1", 22 "stock_unlimited_max": "1", 23 "deliv_date_id": "2", 24 "status": "1", 25 "del_flg": "0", 26 "update_date": "2017-08-24 10:14:46", 27 "price01_min_inctax": null, 28 "price01_max_inctax": null, 29 "price02_min_inctax": 2700, 30 "price02_max_inctax": 2700, 31 "price01_min_format": "0", 32 "price01_max_format": "0", 33 "price02_min_format": "2,500", 34 "price02_max_format": "2,500", 35 "price01_min_inctax_format": "0", 36 "price01_max_inctax_format": "0", 37 "price02_min_inctax_format": "2,700", 38 "price02_max_inctax_format": "2,700", 39 "price01_min_tax_format": "0", 40 "price01_max_tax_format": "0", 41 "price02_min_tax_format": "2,700", 42 "price02_max_tax_format": "2,700", 43 "papc2": { 44 "value_id": "103", 45 "product_id": "11", 46 "column_id": "2", 47 "value": "11181905_564c4d7b4000e.jpg", 48 "name": "サムネイル画像01", 49 "type": "image", 50 "required": "0", 51 "max_length": null 52 }, 53 "papc3": { 54 "value_id": "104", 55 "product_id": "11", 56 "column_id": "3", 57 "value": "01271507_588ae396af94a.jpg", 58 "name": "サムネイル画像02", 59 "type": "image", 60 "required": "0", 61 "max_length": null 62 }, 63 "papc4": { 64 "value_id": "101", 65 "product_id": "11", 66 "column_id": "4", 67 "value": "東京都", 68 "name": "原産地", 69 "type": "text", 70 "required": "0", 71 "max_length": "50" 72 }, 73 "papc5": { 74 "value_id": "102", 75 "product_id": "11", 76 "column_id": "5", 77 "value": "常温", 78 "name": "常温・冷蔵・冷凍", 79 "type": "text", 80 "required": "0", 81 "max_length": "50" 82 } 83 } 84 ] 85}
問題のきりわけができないので、もっと単純なサンプルをあげて検証されることをおすすめします。すくなくともjsがエラーが出ている箇所は直してください
回答1件
0
ベストアンサー
実際に動かして確認したわけではないですが、以下のような感じならどうでしょうか。
チェック済みかどうかの判定はprop('checked')で判定し、その後valueに該当する配列の中身を$('refine-seach')の子要素として追加しています。
現状のままの作りでPGを考えましたが、candyArrayもmeatArrayも大して構造が変わらないのであれば、keyValueの二次元配列にしたほうが処理はスッキリ纏められるかもしれません。
二次元配列をループさせて[key]とinputのValueが一致すれば[value]の中身を取得して表示する感じです。
今の作りだと配列の種類が増えればelse ifが延々と増えて後々しんどくなると思います。
例）
productArray =
'candy' => [10,11,275,221,283],
'meat' => [14,12,15,169,170,13,16,17,167,168]
js
1$('input').change(function() { 2 3 // チェック済みならtrue 4 var checked = $(this).prop('checked'); 5 if(checked){ 6 $('refine-seach').empty(); 7 8 var prodValue = $(this).val(); 9 if(prodValue == 'candy'){ 10 $.each(candyArray,function(index, elem) { 11 $('refine-seach').append('<li>' + elem + '</li>'); 12 } 13 ); 14 }else if(prodValue == 'candy'){ 15 $.each(meatArray,function(index, elem) { 16 $('refine-seach').append('<li>' + elem + '</li>'); 17 } 18 ); 19 } 20 } 21})
投稿2018/09/14 00:52
総合スコア377
あなたの回答
tips
プレビュー
