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