Q&A
PHPほとんど関係ないような。
ただ、自身で組まれたcss、js提示されないと他者には再現確認ができないかと。
ご覧いただきありがとうございます。
商品一覧ページを作成しているのですが、商品数が多くてスクロールしなければ
全て表示できない場合でもスクロールバーが表示されません。
3つ目、4つ目の商品名などの情報が表示されない原因はどこにあるのでしょうか。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 9 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 10 <script src="js/app.js"></script> 11</head> 12<body> 13 <header> 14 <div class="logo"> 15 <a href=""></a> 16 </div> 17 <h1> 18 </h1> 19 <div class="modal-back"></div> 20 <div class="cart-modal"> 21 <h2 class="post_title"></h2> 22 </div> 23 <div class="cart-box"><a class="cart-check" href="">(<span id="cart-count">0</span>)</a></div> 24 <script> 25 cart_change(); 26 27 </script> 28 29 </header> 30<div class="main"> 31 <div class="product-corner"> 32 <script> 33 var product_id = 2; 34 35 </script> 36 <div class="product-box"> 37 <div class="product-item"> 38 <img src="" alt="" class="product-img"> 39 <span class="product-name"> 40 </span> 41 <span class="product-price"> 42 </span> 43 <div class="info-box"> 44 <div id="2" class="fav_button"><span class="fav_icon"></span><span class="__text"><p id="sumi_2"></p></span> 45 </div> 46 <script> 47 checked_inspect(product_id); 48 </script> 49 <select id="cnt_2"> 50 <option value="1">1</option> 51 </select> 52 <button class="cart_in" value="2"> 53 </button> 54 </div> 55 </div> 56 <script> 57 var product_id = 4; 58 59 </script> 60 <div class="product-item"> 61 <img src="" alt="" class="product-img"> 62 <span class="product-name"> 63 </span> 64 <span class="product-price"> 65 </span> 66 <div class="info-box"> 67 <div id="4" class="fav_button"><span class="fav_icon"></span><span class="__text"><p id="sumi_4"></p></span> 68 </div> 69 <script> 70 checked_inspect(product_id); 71 </script> 72 <select id="cnt_4"> 73 <option value="1">1</option> 74 </select> 75 <button class="cart_in" value="4"> 76 </button> 77 </div> 78 </div> 79 <script> 80 var product_id = 6; 81 </script> 82 <div class="product-item"> 83 <img src="" alt="" class="product-img"> 84 <span class="product-name"> 85 </span> 86 <span class="product-price"> 87 </span> 88 <div class="info-box"> 89 <div id="6" class="fav_button"><span class="fav_icon"></span><span class="__text"><p id="sumi_6"></p></span> 90 </div> 91 <script> 92 checked_inspect(product_id); 93 </script> 94 <select id="cnt_6"> 95 <option value="1">1</option> 96 </select> 97 <button class="cart_in" value="6"> 98 </button> 99 </div> 100 </div> 101 <script> 102 var product_id = 7; 103 </script> 104 <div class="product-box"> 105 <div class="product-item"> 106 <img src="" alt="" class="product-img"> 107 <span class="product-name"> 108 </span> 109 <span class="product-price"> 110 </span> 111 <div class="info-box"> 112 <div id="7" class="fav_button"><span class="fav_icon"></span><span class="__text"><p id="sumi_7"></p></span> 113 </div> 114 <script> 115 checked_inspect(product_id); 116 </script> 117 <select id="cnt_7"> 118 <option value="1">1</option> 119 </select> 120 <button class="cart_in" value="7"> 121 </button> 122 </div> 123 </div> 124 </div> 125 </div> 126</div> 127 <footer></footer> 128</body> 129</html> 130
css
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 list-style: none; 6} 7header{ 8 height: 25px; 9 padding-bottom: 200px; 10} 11.logo{ 12 position: relative; 13 top: 50px; 14 left: 70px; 15} 16.logo a{ 17 position: relative; 18 text-decoration: none; 19} 20.cart-box{ 21 position: relative; 22 float: right; 23 top:-50px; 24 right: 70px; 25} 26.cart-modal{ 27 display: none; 28 position: fixed; 29 z-index: 15; 30 top: 30%; 31 left: 50%; 32 width: 800px; 33 padding: 10px; 34 border-radius: 8px; 35 -webkit-transform: translate(-50%, -10%); 36 transform: translate(-50%, -10%); 37 font-size: 1.3rem; 38 border: 0.3rem solid #fff; 39} 40.modal-back{ 41 display: none; 42 position: fixed; 43 top: 0; 44 left: 0; 45 width: 100%; 46 height: 100%; 47 z-index: 10; 48} 49.modal-box{ 50 display: flex; 51 justify-content: space-around; 52 text-align: left; 53} 54.modal-title{ 55 text-align: center; 56 padding-bottom: 15px; 57} 58.modal-left{ 59 width: 450px; 60} 61.modal-left,.modal-center,.modal-right{ 62 padding: 10px; 63} 64body { 65 overflow: hidden; 66 margin: 0; 67 padding: 0; 68 height: 100%; 69} 70h1{ 71 text-align: center; 72 padding-top: 20px; 73} 74.main{ 75 position: relative; 76 text-align: center; 77} 78.drop{ 79 max-width: 1200px; 80 display: flex; 81 padding-top: 20px; 82} 83 84button { 85 cursor: pointer; 86 -webkit-appearance: none; 87 -moz-appearance: none; 88 appearance: none; 89 vertical-align: middle; 90 color: inherit; 91 font: inherit; 92 border: 0; 93 background: transparent; 94 padding: 0; 95 margin: 0; 96 outline: none; 97 border-radius: 0; 98} 99.product-box{ 100 display: flex; 101 flex-wrap: wrap; 102} 103.product-corner{ 104 z-index:10; 105} 106.product-item{ 107 padding-left: 10%; 108 padding-bottom: 20px; 109 width: 50%; 110 height: 400px; 111} 112.product-price{ 113 width: 50%; 114} 115.product-img{ 116 width: 300px; 117 height: 200px; 118} 119.product-img,.product-name,.product-price{ 120 display: block; 121 position: relative; 122} 123.product-name{ 124 font-size: 18px; 125 font-weight: bold; 126 width: 50%; 127} 128.info-box{ 129 position: absolute; 130} 131.fav_button { 132 width: 123px; 133 height: 48px; 134 border: 1px solid #9F5050; 135 display: -webkit-box; 136 display: -ms-flexbox; 137 display: flex; 138 -webkit-box-align: center; 139 -ms-flex-align: center; 140 align-items: center; 141 -webkit-box-pack: center; 142 -ms-flex-pack: center; 143 justify-content: center; 144 font-size: 12px; 145 font-weight: bold; 146 letter-spacing: 0.1em; 147 cursor: pointer; 148 white-space: nowrap; 149 font-size: 11px; 150} 151#cnt{ 152 position: relative; 153 left: -80px; 154} 155 .fav_icon { 156 position: relative; 157 width: 20px; 158 height: 19px; 159 display: inline-block; 160 margin-right: 10px; 161} 162.fav_button .fav_icon:before { 163 content: ""; 164 position: absolute; 165 top: 0; 166 left: 0; 167 right: 0; 168 bottom: 0; 169 background-image: url(../img/fav_icon.png); 170 background-size: contain; 171 background-repeat: no-repeat; 172} 173.is-choosen .fav_icon:before { 174 opacity: 0; 175} 176.fav_button .fav_icon:after { 177 content: ""; 178 position: absolute; 179 top: 0; 180 left: 0; 181 right: 0; 182 bottom: 0; 183 background-image: url(../img/fav_icon_w.png); 184 background-size: contain; 185 background-repeat: no-repeat; 186 opacity: 0; 187} 188.is-choosen .fav_icon:after { 189 opacity: 1; 190} 191.cart_in{ 192 margin-left: 10px; 193 padding: 5px; 194 border: 1px solid #228bc8; 195 border-radius: 30px; 196} 197footer{ 198 text-align: center; 199 position: fixed; 200 bottom: 0; 201 left: 0; 202 width: 100%; 203 height: 35px; 204 padding: 10px; 205}
Javascript
1 2$(function(){ 3 $(document).on('click','.fav_button',function(){ 4 var product_id = $(this).attr('id'); 5 6 var index = String(fav).indexOf(String(product_id)); 7 if (index > -1) { 8 fav = fav.replace(','+product_id, ""); 9 fav = fav.replace(product_id, ""); 10 } else { 11 fav = fav + ',' + product_id; 12 } 13 $.cookie("fav_item", fav, { 14 expires: 1, 15 path: '/' 16 }); 17 checked_inspect(product_id); 18 }); 19 20 function checked_inspect(product_id) { 21 fav = $.cookie("fav_item"); 22 if (String(fav).indexOf(String(product_id)) > -1) { 23 $('#sumi_' + product_id).text('済'); 24 $('#' + product_id).addClass("is-choosen"); 25 } else { 26 $('#sumi_' + product_id).text('登録'); 27 $('#' + product_id).removeClass("is-choosen"); 28 } 29 } 30 function cart_change(){ 31 $.post("cart_count.php", { 32 user_id: 1 33 }, function(data){ 34 $('#cart-count').text(data.count); 35 }); 36 } 37 $(document).on('click', '.cart_in', function(){ 38 var product_id = $(this).val(); 39 var cnt = $('#cnt_' + product_id + ' option:selected').text(); 40 console.log(product_id); 41 console.log(cnt); 42 $.post("cart_in.php", { 43 product_id: product_id, 44 item_count: cnt, 45 user_id: 1 46 }, function(data){ 47 const alert1 = alertMaker(cnt); 48 alert(alert1()); 49 cart_change(); 50 }); 51 }) 52function alertMaker(cnt){ 53 return function(){ 54 return '商品を'+cnt+'個カートに入れました。'; 55 } 56} 57$(document).on('click', '.cart-check', function(){ 58 scroll_position = $(window).scrollTop(); 59 $('body').addClass('fixed').css({'top' : -scroll_position}); 60 $('.cart-modal').fadeIn(); 61 $('.modal-back').fadeIn(); 62 cart_show(); 63}) 64function cart_show(){ 65 $.post("cart-show.php", { 66 user_id: 1 67 }, function(data){ 68 console.log(data.html); 69 $('.cart-modal').html('<h2 class="modal-title">カートに入れた商品</h2><div>'+data.html+'</div>'); 70 }); 71}
回答1件
ベストアンサーあなたの回答
tips
プレビュー
